Leftover checkins for basic functionality

src/app/app.component.html

@@ -1,4 +1,4 @@
 <div class="wrapper">
   <app-side-bar></app-side-bar>
-  <app-header></app-header>
+  <app-content></app-content>
 </div>

src/app/content/content.component.html

@@ -1,3 +1,2 @@
-<p>
-  content works!
-</p>
+<app-header></app-header>
+<app-image-container></app-image-container>

src/app/content/content.component.scss

@@ -0,0 +1,3 @@
+:host {
+    width: 100%;
+}

src/app/content/content.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-content',
   templateUrl: './content.component.html',
-  styleUrls: ['./content.component.css']
+  styleUrls: ['./content.component.scss']
 })
 export class ContentComponent implements OnInit {
 

src/app/content/header/header.component.html

@@ -1 +1,10 @@
-<app-search></app-search>
+<div id="content" class="container-fluid">
+  <div class="row">
+    <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
+      <app-search></app-search>
+    </div>
+    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
+      <app-tools></app-tools>
+    </div>
+  </div>
+</div>

src/app/content/header/header.component.scss

@@ -11,452 +11,12 @@ $theme-supplementer: #5D001E;
 // }
 
 :host {
-    width: 100%;
-}
-
-p {
-    font-family: 'Poppins', sans-serif;
-    font-size: 1.1em;
-    font-weight: 300;
-    line-height: 1.7em;
-    // color: #999;
-}
-
-a,
-a:hover,
-a:focus {
-    color: inherit;
-    text-decoration: none;
-    transition: all 0.3s;
-}
-
-.navbar {
-    padding: 15px 10px;
-    background: #fff;
-    border: none;
-    border-radius: 0 5px 5px 0;
-    margin-bottom: 40px;
-    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-btn {
-    box-shadow: none;
-    outline: none !important;
-    border: none;
-}
-
-.line {
-    width: 100%;
-    height: 1px;
-    border-bottom: 1px dashed #ddd;
-    margin: 20px 0;
-}
-
-i,
-span {
-    display: inline-block;
-}
-
-/* ---------------------------------------------------
-    SIDEBAR STYLE
------------------------------------------------------ */
-
-.wrapper {
+    padding: 20px;
     display: flex;
-    align-items: stretch;
-    font-family: 'Poppins', sans-serif;
-    background-color: $themeColor-Dark;
 }
 
-#sidebar {
-    min-width: 250px;
-    max-width: 250px;
-    background: $theme-supplementer;
-    color: $themeColor-Dark;
-    transition: all 0.3s;
-}
-
-#sidebar.active {
-    min-width: 80px;
-    max-width: 80px;
-    text-align: center;
-}
-
-#sidebar.active .sidebar-header h3,
-#sidebar.active .CTAs {
-    display: none;
-}
-
-.sidebar-header h3 {
-  display: inline;
-  padding-left: 0.6em;
-  vertical-align: middle;
-}
-
-#sidebar.active .sidebar-header strong {
-    display: block;
-}
-
-#sidebar ul li a {
-    text-align: left;
-}
-
-#sidebar.active ul li a {
-    padding: 20px 10px;
-    text-align: center;
-    font-size: 0.85em;
-}
-
-#sidebar.active ul li a i {
-    margin-right: 0;
-    display: block;
-    font-size: 1.8em;
-    margin-bottom: 5px;
-}
-
-#sidebar.active ul ul a {
-    padding: 10px !important;
-}
-
-#sidebar.active .dropdown-toggle::after {
-    top: auto;
-    bottom: 10px;
-    right: 50%;
-    -webkit-transform: translateX(50%);
-    -ms-transform: translateX(50%);
-    transform: translateX(50%);
-}
-
-#sidebar .sidebar-header {
-    padding: 20px;
-    background:$themeColor-Dark;
-}
-
-#sidebar .sidebar-header strong {
-    display: none;
-    font-size: 1.8em;
-}
-
-#sidebar ul.components {
-    padding: 20px 0;
-    border-bottom: 3px solid $themeColor-Dark;
-}
-
-#sidebar ul li a {
-    padding: 10px;
-    font-size: 1.1em;
-    display: block;
-}
-
-#sidebar ul li a:hover {
-    color: $theme-supplementer;
-    background: $themeColor-Light;
-}
-
-#sidebar ul li a i {
-    margin-right: 10px;
-}
-
-#sidebar ul li.active>a,
-a[aria-expanded="true"] {
-    color: $theme-supplementer;
-    background:$themeColor-Dark;
-}
-
-a[data-toggle="collapse"] {
-    position: relative;
-}
-
-.dropdown-toggle::after {
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    transform: translateY(-50%);
-}
-
-ul ul a {
-    font-size: 0.9em !important;
-    padding-left: 30px !important;
-    background: white;
-    font-weight: bolder;
-}
-
-ul.CTAs {
-    padding: 20px;
-}
-
-ul.CTAs a {
-    text-align: center;
-    font-size: 0.9em !important;
-    display: block;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-a.download {
-    background: #fff;
-    color: #7386D5;
-}
-
-a.article,
-a.article:hover {
-    background: #6d7fcc !important;
-    color: #fff !important;
-}
-
-/* ---------------------------------------------------
-    CONTENT STYLE
------------------------------------------------------ */
-
-#content {
-    width: 100%;
-    padding: 20px;
-    min-height: 100vh;
-    transition: all 0.3s;
-}
-
-/* ---------------------------------------------------
-    MEDIAQUERIES
------------------------------------------------------ */
-
-@media (max-width: 768px) {
-    #sidebar {
-        min-width: 80px;
-        max-width: 80px;
-        text-align: center;
-        margin-left: -80px !important;
-    }
-    .dropdown-toggle::after {
-        top: auto;
-        bottom: 10px;
-        right: 50%;
-        -webkit-transform: translateX(50%);
-        -ms-transform: translateX(50%);
-        transform: translateX(50%);
-    }
-    #sidebar.active {
-        margin-left: 0 !important;
-    }
-    #sidebar .sidebar-header h3,
-    #sidebar .CTAs {
-        display: none;
-    }
-    #sidebar .sidebar-header strong {
-        display: block;
-    }
-    #sidebar ul li a {
-        padding: 20px 10px;
-    }
-    #sidebar ul li a span {
-        font-size: 0.85em;
-    }
-    #sidebar ul li a i {
-        margin-right: 0;
-        display: block;
-    }
-    #sidebar ul ul a {
-        padding: 10px !important;
-    }
-    #sidebar ul li a i {
-        font-size: 1.3em;
-    }
-    #sidebar {
-        margin-left: 0;
-    }
-    #sidebarCollapse span {
-        display: none;
-    }
-    .text-muted {
-        color: #bcb !important;
-    }
-}
-
-@media(min-width: 576px) {
-    .card-group>.card:first-child {
-        border-top-right-radius: .25rem;
-        border-bottom-right-radius: .25rem;
-    }
-    .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
-        border-radius: .25rem;
-    }
-    .card-group>.card:last-child {
-        border-top-left-radius: .25rem;
-        border-bottom-left-radius: .25rem;
-    }
-}
-/* -------------------------------------------------
-ADDITIONS
---------------------------------------------------*/
-.hide {
-  display: none;
-}
-
-.prompt {
-  display: flex;
-  width: 2em;
-  border-right: 1px solid #c99034;
-//   background-color: #f5d38b;
-  background-color: $theme-supplementer;
-  width: 4%;
-  margin-bottom: 40px;
-  border-radius: 4px 0 0 4px;
-}
-
-.promptext {
-  animation:blinkingText 0.8s infinite;
-//   color: #975f04;
-//   color: $themeColor-Light;
-  text-align: center;
-  line-height: 2em;
-  font: 1.5em bolder;
-  margin: auto;
-}
-
-.good {
-    animation: anim .3s ease-in-out;
-}
-
-.repoLink {
-    color: #000;
-    font-weight: bolder;
-    text-decoration: underline;
-}
-
-.headerprompt {
-  display: flex;
-  width: 100%;
-}
-
-.logotext {
-  color: $theme-supplementer;
-}
-
-#content nav div.collapse li a.nav-link i.far {
-  color: $theme-supplementer;
-  font-size: 1.8em;
-  padding: 0.2em;
-}
-
-#loading-img {
-    background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
-    height: 100%;
-    z-index: 20;
-}
-
-.overlay {
-    background: #e9e9e9;
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0.5;
-}
-
-.loader {
-    border: 0px solid #f3f3f3;
-    border-radius: 50%;
-    border-top: 2px solid #3498db;
-    border-right: 2px solid #3498db;
-    width: 20px;
-    height: 20px;
-    -webkit-animation: spin 2s linear infinite; /* Safari */
-    animation: spin 2s linear infinite;
-  }
-.card:not(.widget) {
-    background: linear-gradient(to right, white, lightblue)
-}
-.light-red {
-    // background:linear-gradient(white, lightblue);
-    background: linear-gradient(to right, white, #dfc99a)
-}
-  
-// f3d98c
-.featureRequest {
-    background-color : #007bff;
-    color: white;
-    font-size: 1.5em;
-    padding: 10px 20px;
-    border-radius: 30px;
-}
-  
-  #featureRequest {
-    position: fixed;
-    bottom: 2em;
-    right: 2.5em;
-  }
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-@keyframes anim {
-    0% {
-      display: none;
-      opacity: 0;
-    }
-    1% {
-      display: block;
-      opacity: 0;
-      transform: scale(0);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-}
-@keyframes blinkingText {
-  0%{     color: $themeColor-Light;    }
-  49%{    color: transparent; }
-  50%{    color: transparent; }
-  99%{    color:transparent;  }
-  100%{   color: $themeColor-Light;    }
-}
-
-/* --------------------------------------------------
-  OVERRIDES
-  --------------------------------------------------*/
-  .btn:not(.featureRequest) {
-    background-color: $theme-supplementer;
-    color: $themeColor-Dark
-  }
-
-  #content #header .navbar {
-    width: 96%;
-  }
-
-  .navbar-form {
-    width: 88%;
-  }
-
-  .form-control {
-    padding: .6rem 1em;
-  }
-
-  .container-fluid {
-    padding-left: 0.3em;
-  }
-
-  .card-group {
-    flex-direction:column;
-  }
-
-  #command.form-control {
-      width: 92%;
-  }
-
-  .ml-auto {
-      margin-left: 0!important;
-  }
-
-  .btn-info {
-      border-color: orange;
-  }
-
-  .btn-info:hover {
-    border-color: orange;
-    opacity: 1
+//OVERWRITES
+.container-fluid {
+    padding-right: 0px;
+    padding-left: 0px;
 }

src/app/content/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'app-header',
@@ -7,9 +7,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
+  @HostBinding('class.container-fluid') expand: boolean = false;
+
   constructor() { }
 
   ngOnInit() {
+    this.expand = true;
   }
 
 }

src/app/content/header/search/search.component.html

@@ -1,31 +1,6 @@
-<div id="content">
-  <div id="header" class="headerprompt">
+<div class="searchbar">
     <div class="prompt">
-      <p class="promptext">$_</p>
+        <p class="promptext">$_</p>
     </div>
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
-      <div class="container-fluid">
-        <input type="text" class="form-control" placeholder="What you need..." name="command" id="command">
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="nav navbar-nav ml-auto">
-            <li id="btnFavorites" class="nav-item">
-              <a class="nav-link" href="#">
-                <i class="far fa-star"></i>
-              </a>
-            </li>
-            <li id="btnClearCommand" class="nav-item">
-              <a class="nav-link" href="#">
-                <i class="far fa-trash-alt"></i>
-              </a>
-            </li>
-            <li id="btnFireCommand" class="nav-item">
-              <a class="nav-link" href="#">
-                <i class="far fa-paper-plane"></i>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  </div>
+    <input type="text" class="container-fluid" placeholder="What you need..." name="command" id="command">
 </div>

src/app/content/header/search/search.component.scss

@@ -5,454 +5,35 @@ $theme-font: verdana, sans-serif;
 // $theme-supplementer: #f39c12;
 $theme-supplementer: #5D001E;
 
-// app-root {
-//     font-family: 'Poppins', sans-serif;
-//     background-color: $themeColor-Dark;
-// }
-
-p {
-    font-family: 'Poppins', sans-serif;
-    font-size: 1.1em;
-    font-weight: 300;
-    line-height: 1.7em;
-    // color: #999;
-}
-
-a,
-a:hover,
-a:focus {
-    color: inherit;
-    text-decoration: none;
-    transition: all 0.3s;
-}
-
-.navbar {
-    padding: 15px 10px;
-    background: #fff;
-    border: none;
-    border-radius: 0 5px 5px 0;
-    margin-bottom: 40px;
-    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-btn {
-    box-shadow: none;
-    outline: none !important;
-    border: none;
-}
-
-.line {
-    width: 100%;
-    height: 1px;
-    border-bottom: 1px dashed #ddd;
-    margin: 20px 0;
-}
-
-i,
-span {
-    display: inline-block;
-}
-
-/* ---------------------------------------------------
-    SIDEBAR STYLE
------------------------------------------------------ */
-
-.wrapper {
+.searchbar {
     display: flex;
-    align-items: stretch;
-    font-family: 'Poppins', sans-serif;
-    background-color: $themeColor-Dark;
-}
-
-#sidebar {
-    min-width: 250px;
-    max-width: 250px;
-    background: $theme-supplementer;
-    color: $themeColor-Dark;
-    transition: all 0.3s;
-}
-
-#sidebar.active {
-    min-width: 80px;
-    max-width: 80px;
-    text-align: center;
-}
-
-#sidebar.active .sidebar-header h3,
-#sidebar.active .CTAs {
-    display: none;
-}
-
-.sidebar-header h3 {
-  display: inline;
-  padding-left: 0.6em;
-  vertical-align: middle;
-}
-
-#sidebar.active .sidebar-header strong {
-    display: block;
-}
-
-#sidebar ul li a {
-    text-align: left;
-}
-
-#sidebar.active ul li a {
-    padding: 20px 10px;
-    text-align: center;
-    font-size: 0.85em;
-}
-
-#sidebar.active ul li a i {
-    margin-right: 0;
-    display: block;
-    font-size: 1.8em;
-    margin-bottom: 5px;
-}
-
-#sidebar.active ul ul a {
-    padding: 10px !important;
-}
-
-#sidebar.active .dropdown-toggle::after {
-    top: auto;
-    bottom: 10px;
-    right: 50%;
-    -webkit-transform: translateX(50%);
-    -ms-transform: translateX(50%);
-    transform: translateX(50%);
-}
-
-#sidebar .sidebar-header {
-    padding: 20px;
-    background:$themeColor-Dark;
-}
-
-#sidebar .sidebar-header strong {
-    display: none;
-    font-size: 1.8em;
-}
-
-#sidebar ul.components {
-    padding: 20px 0;
-    border-bottom: 3px solid $themeColor-Dark;
-}
-
-#sidebar ul li a {
-    padding: 10px;
-    font-size: 1.1em;
-    display: block;
-}
-
-#sidebar ul li a:hover {
-    color: $theme-supplementer;
-    background: $themeColor-Light;
-}
-
-#sidebar ul li a i {
-    margin-right: 10px;
-}
-
-#sidebar ul li.active>a,
-a[aria-expanded="true"] {
-    color: $theme-supplementer;
-    background:$themeColor-Dark;
-}
-
-a[data-toggle="collapse"] {
-    position: relative;
-}
-
-.dropdown-toggle::after {
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    transform: translateY(-50%);
-}
-
-ul ul a {
-    font-size: 0.9em !important;
-    padding-left: 30px !important;
-    background: white;
-    font-weight: bolder;
-}
-
-ul.CTAs {
-    padding: 20px;
-}
-
-ul.CTAs a {
-    text-align: center;
-    font-size: 0.9em !important;
-    display: block;
-    border-radius: 5px;
-    margin-bottom: 5px;
-}
-
-a.download {
-    background: #fff;
-    color: #7386D5;
-}
-
-a.article,
-a.article:hover {
-    background: #6d7fcc !important;
-    color: #fff !important;
-}
-
-/* ---------------------------------------------------
-    CONTENT STYLE
------------------------------------------------------ */
-
-#content {
-    width: 100%;
-    padding: 20px;
-    min-height: 100vh;
-    transition: all 0.3s;
-}
-
-/* ---------------------------------------------------
-    MEDIAQUERIES
------------------------------------------------------ */
-
-@media (max-width: 768px) {
-    #sidebar {
-        min-width: 80px;
-        max-width: 80px;
-        text-align: center;
-        margin-left: -80px !important;
-    }
-    .dropdown-toggle::after {
-        top: auto;
-        bottom: 10px;
-        right: 50%;
-        -webkit-transform: translateX(50%);
-        -ms-transform: translateX(50%);
-        transform: translateX(50%);
-    }
-    #sidebar.active {
-        margin-left: 0 !important;
-    }
-    #sidebar .sidebar-header h3,
-    #sidebar .CTAs {
-        display: none;
-    }
-    #sidebar .sidebar-header strong {
-        display: block;
-    }
-    #sidebar ul li a {
-        padding: 20px 10px;
-    }
-    #sidebar ul li a span {
-        font-size: 0.85em;
-    }
-    #sidebar ul li a i {
-        margin-right: 0;
-        display: block;
-    }
-    #sidebar ul ul a {
-        padding: 10px !important;
-    }
-    #sidebar ul li a i {
-        font-size: 1.3em;
-    }
-    #sidebar {
-        margin-left: 0;
-    }
-    #sidebarCollapse span {
-        display: none;
-    }
-    .text-muted {
-        color: #bcb !important;
-    }
-}
-
-@media(min-width: 576px) {
-    .card-group>.card:first-child {
-        border-top-right-radius: .25rem;
-        border-bottom-right-radius: .25rem;
-    }
-    .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
-        border-radius: .25rem;
-    }
-    .card-group>.card:last-child {
-        border-top-left-radius: .25rem;
-        border-bottom-left-radius: .25rem;
-    }
-}
-/* -------------------------------------------------
-ADDITIONS
---------------------------------------------------*/
-.hide {
-  display: none;
 }
 
 .prompt {
-  display: flex;
-  width: 2em;
-  border-right: 1px solid #c99034;
-//   background-color: #f5d38b;
-  background-color: $theme-supplementer;
-  width: 4%;
-  margin-bottom: 40px;
-  border-radius: 4px 0 0 4px;
+    display: flex;
+    padding: 0.9em;
+    // border-right: 1px solid #c99034;
+    background-color: $theme-supplementer;
+    width: 4%;
+    // margin-bottom: 40px;
+    border-radius: 0.4em 0 0 0.4em;
 }
 
 .promptext {
-  animation:blinkingText 0.8s infinite;
-//   color: #975f04;
-//   color: $themeColor-Light;
-  text-align: center;
-  line-height: 2em;
-  font: 1.5em bolder;
-  margin: auto;
+    animation: blinkingText 0.8s infinite;
+    text-align: center;
+    line-height: 2em;
+    font: 1.2em bolder;
+    margin: auto;
 }
 
-.good {
-    animation: anim .3s ease-in-out;
+input[type=text] {
+    padding: 15px;
+    border-radius: 0 0.4em 0.4em 0;
 }
 
-.repoLink {
-    color: #000;
-    font-weight: bolder;
-    text-decoration: underline;
-}
-
-.headerprompt {
-  display: flex;
-  width: 100%;
-}
-
-.logotext {
-  color: $theme-supplementer;
-}
-
-#content nav div.collapse li a.nav-link i.far {
-  color: $theme-supplementer;
-  font-size: 1.8em;
-  padding: 0.2em;
-}
-
-#loading-img {
-    background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
-    height: 100%;
-    z-index: 20;
-}
-
-.overlay {
-    background: #e9e9e9;
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0.5;
-}
-
-.loader {
-    border: 0px solid #f3f3f3;
-    border-radius: 50%;
-    border-top: 2px solid #3498db;
-    border-right: 2px solid #3498db;
-    width: 20px;
-    height: 20px;
-    -webkit-animation: spin 2s linear infinite; /* Safari */
-    animation: spin 2s linear infinite;
-  }
-.card:not(.widget) {
-    background: linear-gradient(to right, white, lightblue)
-}
-.light-red {
-    // background:linear-gradient(white, lightblue);
-    background: linear-gradient(to right, white, #dfc99a)
-}
-  
-// f3d98c
-.featureRequest {
-    background-color : #007bff;
-    color: white;
-    font-size: 1.5em;
-    padding: 10px 20px;
-    border-radius: 30px;
-}
-  
-  #featureRequest {
-    position: fixed;
-    bottom: 2em;
-    right: 2.5em;
-  }
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-@keyframes anim {
-    0% {
-      display: none;
-      opacity: 0;
-    }
-    1% {
-      display: block;
-      opacity: 0;
-      transform: scale(0);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-}
-@keyframes blinkingText {
-  0%{     color: $themeColor-Light;    }
-  49%{    color: transparent; }
-  50%{    color: transparent; }
-  99%{    color:transparent;  }
-  100%{   color: $themeColor-Light;    }
-}
-
-/* --------------------------------------------------
-  OVERRIDES
-  --------------------------------------------------*/
-  .btn:not(.featureRequest) {
-    background-color: $theme-supplementer;
-    color: $themeColor-Dark
-  }
-
-  #content #header .navbar {
-    width: 96%;
-  }
-
-  .navbar-form {
-    width: 88%;
-  }
-
-  .form-control {
-    padding: .6rem 1em;
-  }
-
-  .container-fluid {
-    padding-left: 0.3em;
-  }
-
-  .card-group {
-    flex-direction:column;
-  }
-
-  #command.form-control {
-      width: 92%;
-  }
-
-  .ml-auto {
-      margin-left: 0!important;
-  }
-
-  .btn-info {
-      border-color: orange;
-  }
-
-  .btn-info:hover {
-    border-color: orange;
-    opacity: 1
+// OVERWRITES
+.container-fluid {
+    padding-left: 0px;
+    padding-right: 0px;
 }

src/app/content/header/tools/tools.component.html

@@ -1,3 +1,19 @@
-<p>
-  tools works!
-</p>
+<div class="navbar-collapse" id="navbarSupportedContent">
+  <ul class="nav ml-auto">
+    <li id="btnFavorites" class="nav-item">
+      <a class="nav-link" href="#">
+        <i class="far fa-star"></i>
+      </a>
+    </li>
+    <li id="btnClearCommand" class="nav-item">
+      <a class="nav-link" href="#">
+        <i class="far fa-trash-alt"></i>
+      </a>
+    </li>
+    <li id="btnFireCommand" class="nav-item">
+      <a class="nav-link" href="#">
+        <i class="far fa-paper-plane"></i>
+      </a>
+    </li>
+  </ul>
+</div>

src/app/content/header/tools/tools.component.scss

@@ -0,0 +1,34 @@
+$themeColor-Light: #EEE2DC;
+// $themeColor-Dark:#252525;
+$themeColor-Dark:#E3E2DF;
+$theme-font: verdana, sans-serif;
+// $theme-supplementer: #f39c12;
+$theme-supplementer: #5D001E;
+
+
+a,
+a:hover,
+a:focus {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s;
+}
+
+
+a[data-toggle="collapse"] {
+    position: relative;
+}
+
+div.navbar-collapse li {
+    float: left;
+    a.nav-link i.far {
+        color: $theme-supplementer;
+        font-size: 1.6em;
+        padding: 0.2em;
+    }
+}
+
+//OVERWRITES
+.nav-link {
+    padding: .7rem 0.5rem;
+}

src/app/content/header/tools/tools.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-tools',
   templateUrl: './tools.component.html',
-  styleUrls: ['./tools.component.css']
+  styleUrls: ['./tools.component.scss']
 })
 export class ToolsComponent implements OnInit {
 

src/app/content/image-container/image-container.component.html

@@ -1,3 +1,7 @@
-<p>
-  image-container works!
-</p>
+<div class="row">
+  <app-image 
+    class="image"
+    *ngFor="let image of images"
+    [image]='image'>
+  </app-image>
+</div>

src/app/content/image-container/image-container.component.scss

@@ -0,0 +1,3 @@
+p {
+    padding: 20px;
+}

src/app/content/image-container/image-container.component.ts

@@ -1,11 +1,30 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output } from '@angular/core';
+import { Image } from '../image';
 
 @Component({
   selector: 'app-image-container',
   templateUrl: './image-container.component.html',
-  styleUrls: ['./image-container.component.css']
+  styleUrls: ['./image-container.component.scss']
 })
 export class ImageContainerComponent implements OnInit {
+  @Output() images: Image[] = [
+    new Image('dragonfly1', '/assets/images/GUD_1.JPG', 'Guddu 1'),
+    new Image('dragonfly2', '/assets/images/GUD_2.JPG', 'sampleDesc2'),
+    new Image('dragonfly3', '/assets/images/GUD_3.JPG', 'sampleDesc3'),
+    new Image('dragonfly4', '/assets/images/GUD_4.JPG', 'sampleDesc4'),
+    new Image('dragonfly1', '/assets/images/GUD_5.JPG', 'sampleDesc1'),
+    new Image('dragonfly2', '/assets/images/GUD_6.JPG', 'sampleDesc2'),
+    new Image('dragonfly3', '/assets/images/GUD_7.JPG', 'sampleDesc3'),
+    new Image('dragonfly4', '/assets/images/GUD_8.JPG', 'sampleDesc4'),
+    new Image('dragonfly1', '/assets/images/GUD_9.JPG', 'sampleDesc1'),
+    new Image('dragonfly2', '/assets/images/GUD_10.JPG', 'sampleDesc2'),
+    new Image('dragonfly3', '/assets/images/GUD_11.JPG', 'sampleDesc3'),
+    new Image('dragonfly4', '/assets/images/GUD_12.JPG', 'sampleDesc4'),
+    new Image('dragonfly1', '/assets/images/GUD_4.JPG', 'sampleDesc1'),
+    new Image('dragonfly2', '/assets/images/GUD_3.JPG', 'sampleDesc2'),
+    new Image('dragonfly3', '/assets/images/GUD_2.JPG', 'sampleDesc3'),
+    new Image('dragonfly4', '/assets/images/GUD_1.JPG', 'sampleDesc4')
+  ]
 
   constructor() { }
 

src/app/content/image-container/image/image.component.html

@@ -1,3 +1,16 @@
-<p>
-  image works!
-</p>
+<div class="card">
+  <img class="card-img-top" src="{{image.imageUrl}}" alt="Card image cap">
+  <div class="card-body">
+    <h5 class="card-title">{{image.imageTitle}}</h5>
+    <p class="card-text">{{image.imageDescription}}</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-body">
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>

src/app/content/image-container/image/image.component.scss

@@ -0,0 +1,5 @@
+//OVERWRITES
+.card {
+    width: 20rem;
+    margin: 20px auto;
+}

src/app/content/image-container/image/image.component.ts

@@ -1,15 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, HostBinding } from '@angular/core';
+import { Image } from '../../image';
 
 @Component({
   selector: 'app-image',
   templateUrl: './image.component.html',
-  styleUrls: ['./image.component.css']
+  styleUrls: ['./image.component.scss']
 })
 export class ImageComponent implements OnInit {
   
+  @Input() image: Image;
+  @HostBinding('class.col-lg-2') quarter = false;
+
   constructor() { }
 
   ngOnInit() {
+    this.quarter = true;
   }
 
 }

src/app/content/image.ts

@@ -0,0 +1,11 @@
+export class Image {
+    imageTitle: string;
+    imageUrl: string;
+    imageDescription: string;
+
+    constructor(imageTitle, imageUrl, imageDescription) {
+        this.imageTitle = imageTitle;
+        this.imageUrl = imageUrl;
+        this.imageDescription = imageDescription;
+    }
+}