diff --git a/src/app/app.component.html b/src/app/app.component.html index 4e9ff62..d256923 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@
- +
\ No newline at end of file diff --git a/src/app/content/content.component.css b/src/app/content/content.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/content/content.component.html b/src/app/content/content.component.html index f2fa5c2..a17c82e 100644 --- a/src/app/content/content.component.html +++ b/src/app/content/content.component.html @@ -1,3 +1,2 @@ -

- content works! -

+ + \ No newline at end of file diff --git a/src/app/content/content.component.scss b/src/app/content/content.component.scss new file mode 100644 index 0000000..07eaf92 --- /dev/null +++ b/src/app/content/content.component.scss @@ -0,0 +1,3 @@ +:host { + width: 100%; +} \ No newline at end of file diff --git a/src/app/content/content.component.ts b/src/app/content/content.component.ts index dcd6e2a..7dd910c 100644 --- a/src/app/content/content.component.ts +++ b/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 { diff --git a/src/app/content/header/header.component.html b/src/app/content/header/header.component.html index 3f25c2e..202d4b7 100644 --- a/src/app/content/header/header.component.html +++ b/src/app/content/header/header.component.html @@ -1 +1,10 @@ - \ No newline at end of file +
+
+
+ +
+
+ +
+
+
diff --git a/src/app/content/header/header.component.scss b/src/app/content/header/header.component.scss index a2d9630..d106798 100644 --- a/src/app/content/header/header.component.scss +++ b/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; } \ No newline at end of file diff --git a/src/app/content/header/header.component.ts b/src/app/content/header/header.component.ts index 591e148..789d346 100644 --- a/src/app/content/header/header.component.ts +++ b/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; } } diff --git a/src/app/content/header/search/search.component.html b/src/app/content/header/search/search.component.html index ee0fac8..11cf646 100644 --- a/src/app/content/header/search/search.component.html +++ b/src/app/content/header/search/search.component.html @@ -1,31 +1,6 @@ -
- \ No newline at end of file diff --git a/src/app/content/header/search/search.component.scss b/src/app/content/header/search/search.component.scss index a1ddffa..c5a3c35 100644 --- a/src/app/content/header/search/search.component.scss +++ b/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; } \ No newline at end of file diff --git a/src/app/content/header/tools/tools.component.css b/src/app/content/header/tools/tools.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/content/header/tools/tools.component.html b/src/app/content/header/tools/tools.component.html index c37ac80..e11765d 100644 --- a/src/app/content/header/tools/tools.component.html +++ b/src/app/content/header/tools/tools.component.html @@ -1,3 +1,19 @@ -

- tools works! -

+ \ No newline at end of file diff --git a/src/app/content/header/tools/tools.component.scss b/src/app/content/header/tools/tools.component.scss new file mode 100644 index 0000000..5c4486f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/content/header/tools/tools.component.ts b/src/app/content/header/tools/tools.component.ts index 19cd9b2..41623d5 100644 --- a/src/app/content/header/tools/tools.component.ts +++ b/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 { diff --git a/src/app/content/image-container/image-container.component.css b/src/app/content/image-container/image-container.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/content/image-container/image-container.component.html b/src/app/content/image-container/image-container.component.html index eb0d134..2469bd9 100644 --- a/src/app/content/image-container/image-container.component.html +++ b/src/app/content/image-container/image-container.component.html @@ -1,3 +1,7 @@ -

- image-container works! -

+
+ + +
\ No newline at end of file diff --git a/src/app/content/image-container/image-container.component.scss b/src/app/content/image-container/image-container.component.scss new file mode 100644 index 0000000..bc7b19f --- /dev/null +++ b/src/app/content/image-container/image-container.component.scss @@ -0,0 +1,3 @@ +p { + padding: 20px; +} \ No newline at end of file diff --git a/src/app/content/image-container/image-container.component.ts b/src/app/content/image-container/image-container.component.ts index 091966a..44339b0 100644 --- a/src/app/content/image-container/image-container.component.ts +++ b/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() { } diff --git a/src/app/content/image-container/image/image.component.css b/src/app/content/image-container/image/image.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/content/image-container/image/image.component.html b/src/app/content/image-container/image/image.component.html index 43e5aa5..745bf13 100644 --- a/src/app/content/image-container/image/image.component.html +++ b/src/app/content/image-container/image/image.component.html @@ -1,3 +1,16 @@ -

- image works! -

+
+ Card image cap +
+
{{image.imageTitle}}
+

{{image.imageDescription}}

+
+ +
+ Card link + Another link +
+
\ No newline at end of file diff --git a/src/app/content/image-container/image/image.component.scss b/src/app/content/image-container/image/image.component.scss new file mode 100644 index 0000000..4d88b98 --- /dev/null +++ b/src/app/content/image-container/image/image.component.scss @@ -0,0 +1,5 @@ +//OVERWRITES +.card { + width: 20rem; + margin: 20px auto; +} \ No newline at end of file diff --git a/src/app/content/image-container/image/image.component.ts b/src/app/content/image-container/image/image.component.ts index d056563..425dd5b 100644 --- a/src/app/content/image-container/image/image.component.ts +++ b/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; } } diff --git a/src/app/content/image.ts b/src/app/content/image.ts new file mode 100644 index 0000000..ec3f9b8 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/assets/images/BG.jpg b/src/assets/images/BG.jpg new file mode 100644 index 0000000..0582085 Binary files /dev/null and b/src/assets/images/BG.jpg differ diff --git a/src/assets/images/GUD_1.JPG b/src/assets/images/GUD_1.JPG new file mode 100644 index 0000000..87fcda3 Binary files /dev/null and b/src/assets/images/GUD_1.JPG differ diff --git a/src/assets/images/GUD_10.JPG b/src/assets/images/GUD_10.JPG new file mode 100644 index 0000000..3113d00 Binary files /dev/null and b/src/assets/images/GUD_10.JPG differ diff --git a/src/assets/images/GUD_11.JPG b/src/assets/images/GUD_11.JPG new file mode 100644 index 0000000..edff032 Binary files /dev/null and b/src/assets/images/GUD_11.JPG differ diff --git a/src/assets/images/GUD_12.JPG b/src/assets/images/GUD_12.JPG new file mode 100644 index 0000000..6864f31 Binary files /dev/null and b/src/assets/images/GUD_12.JPG differ diff --git a/src/assets/images/GUD_2.JPG b/src/assets/images/GUD_2.JPG new file mode 100644 index 0000000..d71e932 Binary files /dev/null and b/src/assets/images/GUD_2.JPG differ diff --git a/src/assets/images/GUD_3.JPG b/src/assets/images/GUD_3.JPG new file mode 100644 index 0000000..889d73d Binary files /dev/null and b/src/assets/images/GUD_3.JPG differ diff --git a/src/assets/images/GUD_4.JPG b/src/assets/images/GUD_4.JPG new file mode 100644 index 0000000..c8de3de Binary files /dev/null and b/src/assets/images/GUD_4.JPG differ diff --git a/src/assets/images/GUD_5.JPG b/src/assets/images/GUD_5.JPG new file mode 100644 index 0000000..1d9b812 Binary files /dev/null and b/src/assets/images/GUD_5.JPG differ diff --git a/src/assets/images/GUD_6.JPG b/src/assets/images/GUD_6.JPG new file mode 100644 index 0000000..9c0615d Binary files /dev/null and b/src/assets/images/GUD_6.JPG differ diff --git a/src/assets/images/GUD_7.JPG b/src/assets/images/GUD_7.JPG new file mode 100644 index 0000000..b933aa9 Binary files /dev/null and b/src/assets/images/GUD_7.JPG differ diff --git a/src/assets/images/GUD_8.JPG b/src/assets/images/GUD_8.JPG new file mode 100644 index 0000000..731d4eb Binary files /dev/null and b/src/assets/images/GUD_8.JPG differ diff --git a/src/assets/images/GUD_9.JPG b/src/assets/images/GUD_9.JPG new file mode 100644 index 0000000..45615b5 Binary files /dev/null and b/src/assets/images/GUD_9.JPG differ