socialnetworknews-web

commit 107f8d9ab3293f8e2cf99a34a88fab49b3d16542
parent 72387faa5021fa8f1f373cbd969deffa4d68fbb0
Author: MTRNord <mtrnord1@gmail.com>
Date:   Wed, 14 Mar 2018 18:45:23 +0100

Move Menu style, add z-index for the menu, fix "item-" class thingy by using the index and fix "String is not a function"

Diffstat:
M
src/app/app.component.scss
 | 
91
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
src/app/tweet-list/tweet-list.component.html
 | 
2
+-
M
src/styles.scss
 | 
88
-------------------------------------------------------------------------------

3 files changed, 92 insertions(+), 89 deletions(-)
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -0,0 +1,91 @@
+/* VARIABLES */
+$header-bg: #f9a825;
+$menu-width: 250px!default;
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* HEADER */
+header {
+  position: fixed;
+  left: 0;
+  right: 0;
+  height: 66px;
+
+  line-height: 66px;
+  color: #fff;
+
+  background-color: $header-bg;
+  z-index: 10000;
+}
+
+.header__logo {
+  font-weight: 700;
+  padding: 0 25px;
+  float: left;
+}
+
+/* MENU */
+.menu {
+  float: left;
+
+  a {
+    padding: 0 10px;
+  }
+
+  a:hover {
+    color: #c5cae9;
+  }
+}
+
+/* RESPONSIVE */
+@media only screen and (max-width: 768px) {
+  header {
+    position: static;
+  }
+
+  .header__icon {
+    position: relative;
+    display: block;
+    float: left;
+    width: 50px;
+    height: 66px;
+
+    cursor: pointer;
+
+    &:after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 1rem;
+      height: 0;
+      top: 16px;
+      left: 15px;
+    }
+  }
+
+  .menu {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background-color: darken($header-bg, 5);
+    /*    overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;*/
+
+    width: $menu-width;
+
+    transform: translateX($menu-width * -1);
+    a {
+      display: block;
+      height: 40px;
+
+      text-align: center;
+      line-height: 40px;
+
+      border-bottom: 1px solid $header-bg;
+    }
+  }
+}
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,5 +1,5 @@
 <div class="grid">
-  <div [class]="'item-' + String(data.length)" *ngFor="let item of data">
+  <div [class]="'item-' + i" *ngFor="let item of data; let i = index">
     <a href="{{item.tweet_link}}" class="card">
       <!--Retweet Badge-->
       <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true" style="max-width: 22rem">
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,9 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 html { overflow:auto; }
 
-/* VARIABLES */
-$header-bg: #f9a825;
-$menu-width: 250px!default;
 
 .container {
   margin-left: auto;
@@ -22,92 +19,7 @@ $menu-width: 250px!default;
   }
 }
 
-a {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* HEADER */
-header {
-  position: fixed;
-  left: 0;
-  right: 0;
-  height: 66px;
-
-  line-height: 66px;
-  color: #fff;
 
-  background-color: $header-bg;
-}
-
-.header__logo {
-  font-weight: 700;
-  padding: 0 25px;
-  float: left;
-}
-
-/* MENU */
-.menu {
-  float: left;
-
-  a {
-    padding: 0 10px;
-  }
-
-  a:hover {
-    color: #c5cae9;
-  }
-}
-
-/* RESPONSIVE */
-@media only screen and (max-width: 768px) {
-  header {
-    position: static;
-  }
-
-  .header__icon {
-    position: relative;
-    display: block;
-    float: left;
-    width: 50px;
-    height: 66px;
-
-    cursor: pointer;
-
-    &:after {
-      content: '';
-      position: absolute;
-      display: block;
-      width: 1rem;
-      height: 0;
-      top: 16px;
-      left: 15px;
-    }
-  }
-
-  .menu {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    background-color: darken($header-bg, 5);
-    /*    overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;*/
-
-    width: $menu-width;
-
-    transform: translateX($menu-width * -1);
-    a {
-      display: block;
-      height: 40px;
-
-      text-align: center;
-      line-height: 40px;
-
-      border-bottom: 1px solid $header-bg;
-    }
-  }
-}
 
 
 // OLD CSS