Make mobile styling!

index.html

@@ -68,6 +68,7 @@
 
   <main>
     <aside id="sideColumn">
+      <div id="mobileWordFormShow">+</div>
       <form id="wordForm">
         <label>Word<span class="red">*</span><br>
           <input id="wordName">

src/js/setupListeners.js

@@ -10,6 +10,7 @@ export default function setupListeners() {
   setupDetailsTabs();
   setupSearchBar();
   setupWordForm();
+  setupMobileWordFormButton();
 }
 
 function setupDetailsTabs() {
@@ -205,6 +206,21 @@ export function setupWordEditFormButtons() {
   setupMaximizeButtons();
 }
 
+export function setupMobileWordFormButton() {
+  const mobileButton = document.getElementById('mobileWordFormShow'),
+    wordForm = document.getElementById('wordForm');
+  
+  mobileButton.addEventListener('click', () => {
+    if (mobileButton.innerText === '+') {
+      wordForm.style.display = 'block';
+      mobileButton.innerHTML = '×︎';
+    } else {
+      wordForm.style.display = '';
+      mobileButton.innerHTML = '+';
+    }
+  });
+}
+
 export function setupPagination() {
   const nextButtons = document.getElementsByClassName('next-button'),
     prevButtons = document.getElementsByClassName('prev-button'),

src/main.scss

@@ -5,6 +5,9 @@
 @import 'styles/containers';
 @import 'styles/structure';
 @import 'styles/elements';
+@import 'styles/mobile/containers';
+@import 'styles/mobile/structure';
+@import 'styles/mobile/elements';
 
 html, body {
   font-family: $font;

src/styles/_containers.scss

@@ -12,6 +12,7 @@ header {
 main {
   display: block;
   width: 90%;
+  max-width: 1000px;
   min-height: 400px;
   margin: 0 auto;
 

src/styles/_elements.scss

@@ -11,6 +11,8 @@ p, span {
 label {
   display: block;
   font-weight: bold;
+  line-height: 120%;
+  cursor: pointer;
 
   &:not(:last-child) {
     margin-bottom: $general-padding;
@@ -39,6 +41,7 @@ label {
 }
 
 .tag {
+  display: inline-block;
   padding: 3px 9px;
   border: $border;
   border-radius: 3px;
@@ -71,6 +74,7 @@ span .tag {
 .button {
   @extend .tag;
   cursor: pointer;
+  user-select: none;
 }
 
 .modal {
@@ -92,10 +96,6 @@ span .tag {
 
   .modal-content {
     position: absolute;
-    // top: 10%;
-    // left: 20%;
-    // bottom: 10%;
-    // right: 20%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -113,6 +113,7 @@ span .tag {
       right: 10px;
       font-size: 200%;
       cursor: pointer;
+      user-select: none;
     }
   }
 }

src/styles/_structure.scss

@@ -1,7 +1,7 @@
 #top {
   #title {
     display: inline-block;
-    margin: 3px 20px 3px 0;
+    margin: 3px $general-padding 3px 0;
   }
 
   #openSearchModal {
@@ -25,7 +25,7 @@
       max-height: unset;
       margin: 0 auto;
       width: 90%;
-      padding: 20px;
+      padding: $general-padding $general-padding ($general-padding / 2);
 
       label {
         display: inline;
@@ -43,6 +43,16 @@
         bottom: unset;
         right: unset;
         background-color: $white;
+        padding: ($general-padding / 2) $general-padding ($general-padding * 0.25);
+        font-size: 90%;
+
+        .split {
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
       }
     }
 
@@ -51,6 +61,7 @@
     }
 
     .category {
+      margin-right: 8px;
       text-align: right;
       * {
         margin: 0;
@@ -59,22 +70,30 @@
 
     .options {
       label {
+        display: inline-block;
         margin-right: 5px;
+        margin-bottom: 5px;
       }
     }
   }
 }
 
+#mobileWordFormShow {
+  display: none;
+}
+
 #wordForm {
   position: fixed;
   top: auto;
   width: 24%;
+  max-width: 275px;
   padding: 10px;
   background-color: $light;
   border: $border;
   border-radius: 5px;
   max-height: 80%;
   overflow-y: auto;
+  box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
 }
 
 .edit-form {
@@ -83,40 +102,52 @@
 }
 
 #detailsSection {
-  padding: 20px;
+  padding: $general-padding;
   background-color: $white;
   border: $border;
   border-radius: 5px;
 
-  nav li {
+  #dictionaryName {
-    display: inline-block;
+    margin-top: 0;
-    list-style: none;
+  }
-    margin: 0;
-    padding: 10px 20px;
-    border: $border;
-    background-color: $light;
-    cursor: pointer;
-    
-    &:first-child {
-      border-radius: 5px 0 0 5px;
-    }
-    &:last-child {
-      border-radius: 0 5px 5px 0;
-    }
-    &:not(:first-child) {
-      border-left: none;
-    }
 
-    &.active {
+  nav ul {
-      background-color: #bababa;
+    padding-left: 0;
+
+    li {
+      display: inline-block;
+      list-style: none;
+      margin: 0;
+      padding: 10px $general-padding;
+      border: $border;
+      background-color: $light;
+      cursor: pointer;
+      
+      &:first-child {
+        border-radius: 5px 0 0 5px;
+      }
+      &:last-child {
+        border-radius: 0 5px 5px 0;
+      }
+      &:not(:first-child) {
+        border-left: none;
+      }
+
+      &.active {
+        background-color: #bababa;
+      }
     }
   }
 
   #detailsPanel {
     background-color: $white;
-    padding: 20px;
+    padding: $general-padding;
     max-height: 400px;
     overflow-y: auto;
+
+    h3 {
+      margin-top: 0;
+    }
   }
 }
 
@@ -130,7 +161,7 @@
   }
 
   .pronunciation {
-    margin: 0 20px;
+    margin: 0 $general-padding;
   }
 
   .part-of-speech {

src/styles/mobile/_containers.scss

@@ -0,0 +1,39 @@
+@media (max-width: 750px) {
+
+html, body {
+  font-size: 90%;
+  line-height: 90%;
+}
+
+header {
+  &#top {
+    margin-bottom: $general-padding;
+  }
+}
+
+main {
+  #sideColumn {
+    display: block;
+    width: 0;
+    height: block;
+    margin: 0;
+    overflow: visible;
+  }
+
+  #mainColumn {
+    width: 100%;
+    margin: 0;
+  }
+
+  article {
+    dl {
+      padding: 0 ($general-padding / 2);
+
+      dd {
+        margin: 0 ($general-padding * 0.75);
+      }
+    }
+  }
+}
+
+}

src/styles/mobile/_elements.scss

@@ -0,0 +1,90 @@
+@media (max-width: 750px) {
+
+.tag {
+  padding: 2px 6px;
+  font-size: 90%;
+  line-height: 120%;
+
+  &.small {
+    font-size: 70%;
+    line-height: 100%;
+  }
+}
+
+.button {
+  @extend .tag;
+  cursor: pointer;
+  user-select: none;
+}
+
+.tabs {
+  li {
+    padding: 5px;
+  }
+}
+
+.modal {
+  z-index: 10;
+
+  .modal-content .close-button {
+    top: 5px;
+    right: 5px;
+  }
+}
+
+.split {
+  display: block;
+
+  div {
+    display: block;
+    margin-right: unset;
+
+    &:last-child {
+      margin-left: unset;
+    }
+  }
+
+  &.two div,
+  &.three div,
+  div.third {
+    width: 100%;
+    margin: 10px auto;
+  }
+
+  div.quarter,
+  div.three-quarter {
+    display: inline-block;
+  }
+
+  div.quarter {
+    width: 30%;
+  }
+  div.three-quarter {
+    width: 66%;
+  }
+}
+
+.pagination {
+  position: relative;
+  text-align: center;
+  margin: $general-padding 0;
+
+  .page-selector {
+    padding: 5px 10px;
+  }
+
+  .prev-button,
+  .next-button {
+    position: absolute;
+  }
+
+  .prev-button {
+    left: 2.5%;
+  }
+  
+  .next-button {
+    right: 2.5%;
+  }
+}
+
+}

src/styles/mobile/_structure.scss

@@ -0,0 +1,85 @@
+@media (max-width: 750px) {
+  
+#top {
+  #openSearchModal {
+    width: 40%;
+  }
+
+  #searchModal {
+    .modal-content {
+      width: 100%;
+      padding: $general-padding ($general-padding / 2) ($general-padding / 4);
+
+      #searchBox {
+        margin-bottom: 5px;
+      }
+
+      section+footer {
+        padding: ($general-padding / 2) 0;
+      }
+    }
+  }
+}
+
+#mobileWordFormShow {
+  position: fixed;
+  top: $header-height;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  display: block;
+  background-color: #00de00;
+  border: $border;
+  border-radius: 0 3px 3px 0;
+  color: $white;
+  font-size: 30px;
+  line-height: 24px;
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
+  z-index: 1;
+  user-select: none;
+}
+
+#wordForm {
+  display: none;
+  width: 95%;
+  max-width: unset;
+  top: $header-height + 32px;
+  left: 0;
+  right: 3%;
+  z-index: 1;
+}
+
+#detailsSection {
+  nav ul li {
+    padding: 5px 10px;
+  }
+
+  #detailsPanel {
+    max-height: 300px;
+  }
+}
+
+
+.entry {
+  .pronunciation {
+    margin: 0 ($general-padding / 2);
+  }
+}
+
+#editModal {
+  $nav-font-height: 16px;
+  footer {
+    .button {
+      font-size: $nav-font-height - 2px;
+      line-height: $nav-font-height;
+    }
+  }
+  #editDescription {
+    width: 100%;
+    height: 260px;
+  }
+}
+
+}