A bit of ui polish

clean-hot-update.sh

@@ -0,0 +1,2 @@
+find . -name '*.hot-update.*' -delete
+echo "Cleaned!"

package.json

@@ -12,6 +12,7 @@
     "migrate": "npx adonis migration:run -f",
     "build": "npm run migrate && npm run build:css && npm run build:applications",
     "start": "npm run migrate && node server.js",
+    "clean": "bash clean-hot-update.sh",
     "test": "node ace test"
   },
   "keywords": [

public/style.css

@@ -7592,6 +7592,18 @@ video {
     transform: scale(1.1);
     z-index: 10; }
 
+.book-cover {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.4); }
+  .book-cover .image:before {
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    content: "";
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 100%;
+    height: 100%; }
+
 .fade-enter-active, .fade-leave-active {
   transition: opacity .2s; }
 
@@ -7620,5 +7632,8 @@ video {
 .has-diego-width-800 {
   max-width: 50rem; }
 
-.is-boarderless {
+.is-borderless {
   border: none; }
+
+.is-justify-centered {
+  justify-content: center; }

resources/sass/main.scss

@@ -309,7 +309,6 @@ video{
   z-index: inherit;
   flex-basis: 12%;
   text-align: center;
-
 }
 .book-thumb.enabled{
   cursor: pointer;
@@ -318,6 +317,21 @@ video{
     z-index: 10;
   }
 }
+.book-cover{
+  position:relative;
+  border: 1px solid rgba(0,0,0,.4);
+  .image{
+    &:before{
+      border: 1px solid rgba(0,0,0,.4);
+      content: "";
+      position: absolute;
+      top:3px;
+      left:3px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 //Fade vue transition
 .fade-enter-active, .fade-leave-active {
   transition: opacity .2s;
@@ -351,6 +365,9 @@ video{
 .has-diego-width-800{
   max-width: 50rem;
 }
-.is-boarderless{
+.is-borderless{
   border: none;
 }
+.is-justify-centered{
+  justify-content: center;
+}

resources/scripts/applications/home/views/child_profile.vue

@@ -29,10 +29,10 @@
       <!-- Profile -->
       <ProfileHeader :title="child.name" :background="child.profile_cover" />
       <div class="columns is-fullheight m-t-md">
-        <div class="column is-3">
+        <div class="column is-2">
           <div class="card">
-            <div class="card-image">
+            <div class="card-image p-md">
-              <figure class="image is-4by4 p-md">
+              <figure class="image is-1by1">
                 <img :src="child.avatar" class="is-rounded is-avatar" />
               </figure>
             </div>

resources/scripts/applications/home/views/home.vue

@@ -29,10 +29,10 @@
       <!-- Profile -->
       <ProfileHeader :title="user.name" :background="user.profile_cover" />
       <div class="columns is-fullheight m-t-md">
-        <div class="column is-3">
+        <div class="column is-2">
           <div class="card">
-            <div class="card-image">
+            <div class="card-image p-md">
-              <figure class="image is-4by4 p-md">
+              <figure class="image is-1by1">
                 <img :src="user.avatar" class="is-rounded is-avatar" />
               </figure>
             </div>
@@ -76,7 +76,7 @@
                 <h2 class="subtitle">
                   <i class="fa fa-fw fa-book"></i> My Books
                 </h2>
-                <div class="is-flex m-b-md">
+                <div class="is-flex m-b-md is-justify-centered">
                   <div class="book-thumb m-l-md" v-for="book in user.books" :key="book.id">
                     <div class="book-cover">
                       <figure class="image is-2by3 m-a">

resources/views/landing.edge

@@ -9,7 +9,7 @@ A safe and fun way to spend time with far away loved ones
   <div class="hero-body">
     <div class="container">
       <div class="columns">
-        <div class="column m-t-a m-b-a">
+        <div class="column">
           <h1 class="title has-text-grey-darker">
             Seepur
           </h1>
@@ -18,10 +18,10 @@ A safe and fun way to spend time with far away loved ones
           </h2>
           <div class="buttons">
             <a class="button is-info is-rounded" href="/register">Sign Up</a>
-            <a class="button is-rounded is-transparent is-outlined" href='/login'>Log In</a>
+            <a class="button is-rounded  is-outlined" href='/login'>Log In</a>
           </div>
         </div>
-        <div class="column is-half ">
+        <div class="column is-one-third m-b-md">
           <figure class="image">
             <img src="/images/grand.svg" alt="" srcset="">
           </figure>
@@ -31,9 +31,9 @@ A safe and fun way to spend time with far away loved ones
       </div>
     </div>
   </div>
-  <div class="scroll-down-indicator">
+  <div class="scroll-down-indicator is-hidden-mobile">
-    <a href="#info" class="button is-rounded is-outlined">
+    <a href="#info" class="button is-rounded is-outlined is-large is-borderless" style="background-color:transparent">
-      <i class="fa fa-fw fa-arrow-down"></i>
+      <i class="fa fa-fw fa-angle-double-down"></i>
     </a>
   </div>
 </section>

resources/views/layouts/landing.edge

@@ -35,7 +35,7 @@
             <div class="field">
               {{--  <label class="label ">Name</label>  --}}
               <div class="control has-icons-left">
-                <input class="input {{ getErrorFor('name') ? 'is-danger' : ''}} is-boarderless" required="true" name="name" type="text" placeholder="John Snow" value="{{ old('name', '') }}">
+                <input class="input {{ getErrorFor('name') ? 'is-danger' : ''}} is-borderless" required="true" name="name" type="text" placeholder="John Snow" value="{{ old('name', '') }}">
                 <span class="icon is-small is-left">
                   <i class="fa fa-id-card"></i>
                 </span>
@@ -47,7 +47,7 @@
             <div class="field">
               {{--  <label class="label ">Email</label>  --}}
               <div class="control has-icons-left">
-                <input class="input {{ getErrorFor('email') ? 'is-danger' : ''}} is-boarderless" name="email" required="true" type="email" placeholder="j.snow@thewall.com" value="{{ old('email', '') }}">
+                <input class="input {{ getErrorFor('email') ? 'is-danger' : ''}} is-borderless" name="email" required="true" type="email" placeholder="j.snow@thewall.com" value="{{ old('email', '') }}">
                 <span class="icon is-small is-left">
                   <i class="fa fa-envelope"></i>
                 </span>
@@ -59,7 +59,7 @@
             <div class="field">
               {{--  <label class="label ">Password</label>  --}}
               <div class="control has-icons-left">
-                <input class="input {{ getErrorFor('password') ? 'is-danger' : ''}} is-boarderless" id="txt-register-password" name="password" required="true" type="password" placeholder="password">
+                <input class="input {{ getErrorFor('password') ? 'is-danger' : ''}} is-borderless" id="txt-register-password" name="password" required="true" type="password" placeholder="password">
                 <span class="icon is-small is-left">
                   <i class="fa fa-lock"></i>
                 </span>
@@ -69,7 +69,7 @@
             <div class="field m-b-xxs">
               {{--  <label class="label ">Confirm Password</label>  --}}
               <div class="control has-icons-left">
-                <input class="input is-boarderless" type="password" id="txt-register-confirm-password" placeholder="confirm password" required="true">
+                <input class="input is-borderless" type="password" id="txt-register-confirm-password" placeholder="confirm password" required="true">
                 <span class="icon is-small is-left">
                   <i class="fa fa-lock"></i>
                 </span>