From 453b162cac8a07534166a69b06135f41a17a47b9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 2 Jun 2021 16:05:42 +0100
Subject: [PATCH] Adds new material theme

---
 src/components/LinkItems/Collapsable.vue |   2 +-
 src/components/LinkItems/Item.vue        |  18 +-
 src/components/PageStrcture/Footer.vue   |   4 +-
 src/styles/color-themes.scss             | 273 ++++++++++++++---------
 src/utils/defaults.js                    |   6 +-
 src/views/Home.vue                       |   5 +-
 6 files changed, 198 insertions(+), 110 deletions(-)

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index e482c2ec..8878cbf0 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -185,7 +185,7 @@ export default {
     }
 
     .toggle:checked + .lbl-toggle + .collapsible-content {
-        max-height: 1000px;
+        max-height: 3000px;
     }
 
     .toggle:checked + .lbl-toggle {
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 22288e09..109587c7 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -4,9 +4,9 @@
       :target="target === 'newtab' ? '_blank' : ''"
       :class="`item ${!icon? 'short': ''} size-${itemSize}`"
       v-tooltip="getTooltipOptions()"
-      v-bind:style="customStyles"
       rel="noopener noreferrer" tabindex="0"
       :id="`link-${id}`"
+      :style="`--open-icon: ${getUnicodeOpeningIcon()}; ${customStyles}`"
     >
       <!-- Item Text -->
       <div class="tile-title" :id="`tile-${id}`" >
@@ -15,7 +15,8 @@
         <p class="description">{{ description }}</p>
       </div>
       <!-- Item Icon -->
-      <Icon :icon="icon" :url="url" :size="itemSize" :color="color" v-bind:style="customStyles" />
+      <Icon :icon="icon" :url="url" :size="itemSize" :color="color"
+        v-bind:style="customStyles" class="icon-container" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
         :position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
@@ -90,6 +91,14 @@ export default {
         delay: { show: 600, hide: 200 },
       };
     },
+    getUnicodeOpeningIcon() {
+      switch (this.target) {
+        case 'newtab': return '"\\f360"';
+        case 'sametab': return '"\\f24d"';
+        case 'iframe': return '"\\f2d0"';
+        default: return '"\\f054"';
+      }
+    },
   },
   mounted() {
     this.manageTitleEllipse();
@@ -233,6 +242,11 @@ export default {
   p.description {
     display: none;
   }
+  &:before {
+    display: none;
+    font-family: FontAwesome;
+    content: var(--open-icon, "\f054") !important;
+  }
 }
 
 </style>
diff --git a/src/components/PageStrcture/Footer.vue b/src/components/PageStrcture/Footer.vue
index bcaacaff..5a636520 100644
--- a/src/components/PageStrcture/Footer.vue
+++ b/src/components/PageStrcture/Footer.vue
@@ -29,12 +29,12 @@ export default {
 <style scoped lang="scss">
 
 footer {
-  padding: 0.5rem;
+  padding: 0.25rem;
   text-align: center;
   color: var(--medium-grey);
   opacity: var(--dimming-factor);
   background: var(--background-darker);
-  margin-top: 1rem;
+  margin-top: 7px;
   border-top: 1px solid var(--outline-color);
 }
 
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 330e7057..f8e94c72 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -144,7 +144,7 @@ html[data-theme='nord-frost'] {
   .collapsable:nth-child(4n) { background: #5E81AC; }
 }
 
-html[data-theme='material'] {
+html[data-theme='material-original'] {
   --primary: #29B6F6;
   --settings-text-color: #01579b;
   --background: #e2e1e0;
@@ -210,106 +210,6 @@ html[data-theme='material-dark'] {
   }
 }
 
-html[data-theme='material-2'] {
-  --font-body: 'Roboto', serif;
-  --font-headings: 'Francois One', serif;
-
-  --primary: #363636;
-  --background: #e2e1e0;
-  --background-darker: #4285f4;
-  --item-group-outer-background: none;
-  --item-group-shadow: none;
-  --item-group-background: none;
-  --item-background: #fff;
-  --item-background-hover: #fff;
-  --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
-  --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
-  --item-text-color: #363636;
-  --item-group-heading-text-color-hover: #363636;
-  --item-icon-transform-hover: none;
-  --nav-link-border-color-hover: #1341a6;
-  --settings-text-color: #363636;
-  --config-code-color: #363636;
-  --heading-text-color: #fff;
-  --curve-factor: 4px;
-  --curve-factor-navbar: 8px;
-  --search-container-background: linear-gradient(to bottom, #3367d6 0%,#4285f4 5%);
-  header {
-    background: #3367d6;
-    color: #fff;
-    .page-titles span.subtitle {
-      text-shadow: none;
-    }
-  }
-  footer {
-    opacity: 1;
-    color: #fff;
-  }
-  section.filter-container form label {
-    color: var(--primary);
-  }
-  .item:not(.size-small) {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    text-align: left;
-    overflow: hidden;
-    align-items: end;
-    width: 15rem;
-    min-width: 15rem;
-    max-height: 4rem;
-    margin: 0.2rem;
-    .overflow-dots {
-      display: none;
-    }
-    img {
-      padding: 0.1rem 0.25rem;
-    }
-    .tile-title {
-      height: auto;
-      padding: 0.1rem 0.25rem;
-      span.text {
-        position: relative;
-        font-weight: bold;
-        font-size: 1.1rem;
-        width: 100%;
-      }
-      p.description {
-        display: block;
-        margin: 0;
-        white-space: pre-wrap;
-      }	
-    }
-  }
-  .item.size-large {
-    width: 18rem;
-    min-width: 18rem;
-    max-height: 5rem;
-    margin: 0.4rem;
-    img {
-      padding: 0.2rem 0.5rem;
-    }
-  }
-  .tooltip {
-    display: none !important;
-  }
-  .orientation-horizontal {
-    display: flex;
-    flex-direction: column;
-    .there-are-items {
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      @include phone { grid-template-columns: repeat(1, 1fr); }
-      @include tablet { grid-template-columns: repeat(2, 1fr); }
-      @include laptop { grid-template-columns: repeat(3, 1fr); }
-      @include monitor { grid-template-columns: repeat(4, 1fr); }
-      @include big-screen { grid-template-columns: repeat(5, 1fr); }
-      @include big-screen-up { grid-template-columns: repeat(6, 1fr); }
-    }
-  }
-
-}
-
 html[data-theme='colorful'] {
   --font-headings: 'Podkova', monospace;
   --primary: #e8eae1;
@@ -375,6 +275,177 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'] {
   }
 }
 
+html[data-theme='material'] {
+  --font-body: 'Raleway', serif;
+  --font-headings: 'Francois One', serif;
+  --primary: #363636;
+  --background: #f5f5f5;
+  --background-darker: #4285f4;
+  --item-group-outer-background: none;
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-background: #fff;
+  --item-background-hover: #fff;
+  --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
+  --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
+  --item-text-color: #363636;
+  --item-group-heading-text-color-hover: #363636;
+  --item-icon-transform-hover: none;
+  --nav-link-background-color: #0c4eba;
+  --nav-link-text-color: #fff;
+  --nav-link-border-color: #0c4eba;
+  --settings-text-color: #363636;
+  --config-code-color: #363636;
+  --config-settings-background: #fff;
+  --config-settings-color: #363636;
+  --heading-text-color: #fff;
+  --curve-factor: 4px;
+  --curve-factor-navbar: 8px;
+  --search-container-background: #4285f4;
+  header {
+    background: #4285f4;
+    color: #fff;
+    .page-titles span.subtitle {
+      text-shadow: none;
+    }
+  }
+  footer {
+    opacity: 1;
+    color: #fff;
+  }
+  section.filter-container form label {
+    color: #fff;
+  }
+  .prism-editor-wrapper {
+    background: #f5f5f5;
+  }
+  .collapsable {
+    margin: 0;
+    padding: 0;
+  }
+  /* Custom layout for medium and large icons */
+  .item:not(.size-small) {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    text-align: left;
+    overflow: hidden;
+    align-items: center;
+    width: 15rem;
+    min-width: 15rem;
+    max-height: 6rem;
+    margin: 0.2rem;
+    padding: 0.5rem;
+    .overflow-dots {
+      display: none;
+    }
+    img {
+      padding: 0.1rem 0.25rem;
+    }
+    .tile-title {
+      height: auto;
+      padding: 0.1rem 0.25rem;
+      span.text {
+        position: relative;
+        font-weight: bold;
+        font-size: 1.1rem;
+        width: 100%;
+      }
+      p.description {
+        display: block;
+        margin: 0;
+        white-space: pre-wrap;
+        font-size: .9em;
+        text-overflow: ellipsis;
+      }	
+    }
+    &.size-large {
+      width: 18rem;
+      min-width: 18rem;
+      max-height: 5rem;
+      margin: 0.4rem;
+      img {
+        padding: 0.2rem 0.5rem;
+      }
+    }
+  }
+  .tooltip {
+    display: none !important;
+  }
+  .orientation-horizontal {
+    display: flex;
+    flex-direction: column;
+    .there-are-items {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      @include phone { grid-template-columns: repeat(1, 1fr); }
+      @include tablet { grid-template-columns: repeat(2, 1fr); }
+      @include laptop { grid-template-columns: repeat(3, 1fr); }
+      @include monitor { grid-template-columns: repeat(4, 1fr); }
+      @include big-screen { grid-template-columns: repeat(5, 1fr); }
+      @include big-screen-up { grid-template-columns: repeat(6, 1fr); }
+    }
+  }
+  a.item {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s linear 0s;
+    div {
+      transition: all 0.2s linear 0s;
+    }
+    &:before {
+      content: "\f054";
+      font-family: FontAwesome;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      left: 0px;
+      height: 100%;
+      width: 1rem;
+      background-color: #ccd3dd80;
+      border-radius: 0 60% 60% 0;
+      transform: scale(0,1);
+      transform-origin: left center;
+      transition: all 0.2s linear 0s;
+      padding: 0 0.2rem;
+    }
+    &:hover {
+      div.icon-container {
+        text-indent: 1rem;
+      }
+      &:before {
+        transform: scale(1,1);
+        text-indent: 0;
+      }
+      .opening-method-icon {
+        display: none;
+      }
+    }
+    &:active {
+      background: #c7c7c754;
+    }
+    span.text {
+      transition: none;
+    }
+    &.size-small {
+      padding-left: 0.5rem;
+      min-width: 11rem;
+    }
+    &.size-large {
+      &:before {
+        width: 1.5rem;
+      }
+      &:hover {
+        div:nth-child(2) {
+          text-indent: 1.5rem;
+        }
+      }
+    }
+  }
+}
+
 html[data-theme='minimal-light'] {
   --primary: #a5a5a5;
   --background: #ffffff;
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 017b786e..1162fd36 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -20,17 +20,17 @@ module.exports = {
     'thebe',
     'dracula',
     'material',
-    'material-dark',
     'minimal-dark',
     'minimal-light',
-    'material-2',
     'colorful',
     'matrix',
     'matrix-red',
     'hacker-girl',
-    'bee',
     'raspberry-jam',
+    'bee',
     'tiger',
+    'material-original',
+    'material-dark',
     'high-contrast-dark',
     'high-contrast-light',
   ],
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e9a326fb..be17bc8a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -204,6 +204,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
 
 .home {
   padding-bottom: 1px;
@@ -216,7 +217,9 @@ export default {
   display: grid;
   gap: 0.5rem;
   margin: 0 auto;
-  max-width: 1200px;
+  max-width: 90%;
+  overflow: auto;
+  @extend .scroll-bar;
   @include monitor-up {
     max-width: 1400px;
   }