Merge pull request #383 from nus-mtp/development/v0.1.4

Merge Development/v0.1.4 into master

sashimi-webapp/src/App.vue

@@ -68,12 +68,11 @@ a {
 .navbar {
   overflow: hidden;
   box-sizing: border-box;
-  padding: 10px 20px;
+  padding: 22px 20px;
   text-align: left;
 }
 
 .material-icons { 
-
   &.md-54 { 
     font-size: 54px; 
   }
@@ -128,9 +127,14 @@ a {
 }
 
 .button-logo {
-  text-align: left;
-  position: relative;
-  width: $button-logo-width;
+  width: $button-sashimi-width;
+  overflow: hidden;
+  animation: buttonLogoWidthMobile $user-input-keyframe-time;
+  padding-top: 6px;
+
+  img {
+    width: $button-logo-mobile-width;
+  }
 
   a {
     font-size: $logo-font-size;
@@ -142,14 +146,6 @@ a {
     &:visited {
       color: $grey-font;
     }
-
-    &:hover {
-      color: $orange;
-    }
-
-    img {
-      width: 150px;
-    }
     
     p {
       margin-left: 5px;
@@ -167,4 +163,20 @@ a {
   }
 }
 
+@media screen and (min-width: 768px) {
+  .button-logo {
+    width: $button-logo-width;
+    overflow: initial;
+    margin-bottom: 0;
+    animation: buttonLogoWidth $user-input-keyframe-time;
+
+    img {
+      width: $button-logo-width;
+    }
+  }
+}
+
+
+
+
 </style>

sashimi-webapp/src/assets/styles/keyframes.scss

@@ -0,0 +1,27 @@
+@import './variables';
+
+@keyframes viewTypeWidth {
+  0% { width: 0 }
+  100% { width: $view-type-buttons-width }
+}
+
+@keyframes buttonLogoWidthMobile {
+  0% { width: 0 }
+  100% { width: $button-sashimi-width }
+}
+
+@keyframes buttonLogoWidth {
+  0% { width: 0 }
+  100% { width: $button-logo-width }
+}
+
+@keyframes docIconView {
+  0% { transform: scale(1.05) }
+  50% { transform: scale(0.98) }  
+  100% { transform: scale(1) }
+}
+
+@keyframes docListView{
+  0% { transform: scale(1.05) }
+  100% { transform: scale(1) }
+}

sashimi-webapp/src/assets/styles/loader.scss

@@ -6,3 +6,4 @@
 @import '../fonts/Nunito_Sans/NunitoSans.scss';
 
 @import './variables';
+@import './keyframes';

sashimi-webapp/src/assets/styles/variables.scss

@@ -8,26 +8,35 @@ $navbar-font-size: $font-size-primary;
 $documents-name-font-size: 13px;
 
 // widths and heights
-$content-navbar-height: 71px;
-$file-manager-navbar-height: 134px;
-$file-manager-navbar-height-mobile: 174px;
+$content-navbar-height: 78px;
+
+$file-manager-navbar-height: 124px;
 
 $button-logo-width: 158px;
-$button-sashimi-width: 35px;
+$button-logo-mobile-width: 180px;
+$button-sashimi-width: 42px;
 
 $navbar-elements-left-margin: 18px;
 $navbar-button-dropdown-width: 140px;
 
+$view-type-buttons-width: 100.36px;
+
 $searchbar-icons-width: 44px;
 $searchbar-mobile-margin-left: 15px;
+$searchbar-wrapper-mobile-width: calc(100% - #{$button-sashimi-width});
+$searchbar-wrapper-480px-width: calc(100% - #{$button-sashimi-width} - #{$view-type-buttons-width}); 
+$searchbar-wrapper-768px-width: calc(100% - #{$button-logo-width} - #{$view-type-buttons-width}); 
 
 // colors
-$grey-background: #F7F7F7;
+$grey-background: #F2F2F2;
 $grey-border: #D5D5D5;
 $grey-font: #95989A;
 $green: #d3e2e2;
-$orange: #ff8c00;
+$orange: #f26422;
 
 $navbar-background-color: $grey-background;
 $navbar-border-color: $grey-border;
 $documents-focus-color: $green;
+
+// keyframes time
+$user-input-keyframe-time: 0.5s;

sashimi-webapp/src/components/editor-viewer/Content.vue

@@ -43,6 +43,7 @@ export default {
       changeViewModeOnResize: function() {
         if (window.innerWidth < 768 && this.viewMode === 'split') {
           this.viewMode = 'editor';
+          this.navbarInput = 'editor';
         }
       }
     };
@@ -81,12 +82,15 @@ export default {
     // for testing purposes
     // will be handled by fileManager logic
     const fileID = parseInt(this.$route.query.id);
-
-    this.file = fileManager.getFileByID(fileID);
-    this.file.load()
-      .then((data) => {
-        this.mdContent = data;
-      });
+    if (fileID && fileManager.getFileByID(fileID)) {
+      this.file = fileManager.getFileByID(fileID);
+      this.file.load()
+        .then((data) => {
+          this.mdContent = data;
+        });
+    } else {
+      this.$router.push('/');
+    }
 
     if (window.innerWidth < 768) {
       this.viewMode = 'editor';

sashimi-webapp/src/components/editor-viewer/Navbar.vue

@@ -63,7 +63,7 @@
                 v-on:click="updateParent('split')"
         >
         <!--<i class="material-icons md-dark">chrome_reader_mode</i>-->
-        <img src="../../assets/images/buttons/button-split-screen.svg" class="button-img" alt="plugins">
+        <i class="material-icons md-dark">chrome_reader_mode</i>
         </button>
         <button class="navbar-buttons" id="button-viewer"
                 v-on:click="updateParent('viewer')"
@@ -106,6 +106,13 @@ export default {
       this.$router.push({ path: '/' });
     }
   },
+  mounted() {
+    if (window.innerWidth < 768) {
+      this.viewMode = 'editor';
+    } else {
+      this.viewMode = 'split';
+    }
+  }
 };
 </script>
 
@@ -114,9 +121,11 @@ export default {
 
 .navbar {
   box-sizing: border-box;
-  border-bottom: 3px solid $navbar-border-color;
+  border-bottom: 2px solid $navbar-border-color;
+  box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
+  height: $content-navbar-height;
 
-  &[data-viewMode="editor"],
+  &[data-viewMode="editor"], 
   &[data-viewMode="split"] {
     #button-editor, 
     #button-split-screen {
@@ -141,14 +150,6 @@ export default {
   }
 }
 
-.button-logo {
-  cursor: pointer;
-
-  img {
-    padding: 10px 0 10px 0;
-  }
-}
-
 .button-dropdown {
   font-size: $logo-font-size;
   padding: 10px;
@@ -166,6 +167,7 @@ export default {
 
 .navbar-dropdown {
   box-sizing: border-box;
+  margin-top: -6px;
 
   .button-dropdown {
     border: 1px solid transparent;  
@@ -250,6 +252,28 @@ export default {
         display: inline-block;
       }
     }
+
+    &[data-viewMode="editor"] {
+      #button-editor {
+        .material-icons.md-dark {
+          color: $orange;
+        }
+      }
+    }
+    &[data-viewMode="split"] {
+      #button-split-screen {
+        .material-icons.md-dark {
+          color: $orange;
+        }
+      }
+    }
+    &[data-viewMode="viewer"] {
+      #button-viewer {
+        .material-icons.md-dark {
+          color: $orange;
+        }
+      }
+    }
   }
 }
 </style>