From ff53319631cbd9592755ac534c6f0860cdd2336e Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 15:02:02 +0100 Subject: [PATCH 1/7] Using global CSS and shadow DOM CSSs as well --- .angular-cli.json | 7 +- src/{ => assets/images}/favicon.ico | Bin src/assets/scss/_main.scss | 10 ++ src/assets/scss/_variables.scss | 160 +++++++++++++++++++++++++++ src/assets/scss/shared/_buttons.scss | 47 ++++++++ src/index.html | 2 +- src/styles.scss | 2 + 7 files changed, 224 insertions(+), 4 deletions(-) rename src/{ => assets/images}/favicon.ico (100%) create mode 100644 src/assets/scss/_main.scss create mode 100644 src/assets/scss/_variables.scss create mode 100644 src/assets/scss/shared/_buttons.scss diff --git a/.angular-cli.json b/.angular-cli.json index 2787769..bf3f2d6 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -8,9 +8,10 @@ "root": "src", "outDir": "dist", "assets": [ - "assets", - "favicon.ico" - ], + { "glob": "*(fonts|images|icons)/**/*", + "input": "./assets/", + "output": "./" } + ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", diff --git a/src/favicon.ico b/src/assets/images/favicon.ico similarity index 100% rename from src/favicon.ico rename to src/assets/images/favicon.ico diff --git a/src/assets/scss/_main.scss b/src/assets/scss/_main.scss new file mode 100644 index 0000000..c63ec31 --- /dev/null +++ b/src/assets/scss/_main.scss @@ -0,0 +1,10 @@ + + +@import 'variables'; + +@import + 'shared/buttons'; + + + + diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss new file mode 100644 index 0000000..b1b9c21 --- /dev/null +++ b/src/assets/scss/_variables.scss @@ -0,0 +1,160 @@ +// +// Spaces +// + +$space: 24px; + +$sxlarge: 9 * $space; +$xxxlarge: 6 * $space; +$xxlarge: 4 * $space; +$xlarge: 2 * $space; +$large: 1.5 * $space; +$medium: $space; +$small: 0.75 * $space; +$tiny: 0.5 * $space; +$hair: 0.25 * $space; +$nano: 0.125 * $space; + + +// Color system + +// Tao blue palette +$tao-blue-50: #F2F7FE; +$tao-blue-100: #C9DFFA; +$tao-blue-200: #A0C6F7; +$tao-blue-300: #77AEF3; +$tao-blue-400: #4E95EF; +$tao-blue-500: #277EEC; +$tao-blue-600: #2170B7; +$tao-blue-700: #195684; +$tao-blue-800: #103B5B; +$tao-blue-900: #081A2B; + +// Tao sky palette +$tao-sky-50: #F1FAFD; +$tao-sky-100: #C5E9F5; +$tao-sky-200: #9AD8EE; +$tao-sky-300: #6EC7E6; +$tao-sky-400: #42B7DF; +$tao-sky-500: #19A7D8; +$tao-sky-600: #0E8BA8; +$tao-sky-700: #04647A; +$tao-sky-800: #004251; +$tao-sky-900: #002028; + +// Tao phtalo palette +$tao-phtalo-50: #F2FBFC; +$tao-phtalo-100: #C8EDF1; +$tao-phtalo-200: #9FDFE6; +$tao-phtalo-300: #75D1DB; +$tao-phtalo-400: #4CC3D0; +$tao-phtalo-500: #24B6C6; +$tao-phtalo-600: #16989E; +$tao-phtalo-700: #0C7575; +$tao-phtalo-800: #034C4F; +$tao-phtalo-900: #002426; + +// Tao turqoise palette +$tao-turqoise-50: #F1FBFB; +$tao-turqoise-100: #C3EFEF; +$tao-turqoise-200: #96E3E3; +$tao-turqoise-300: #68D7D7; +$tao-turqoise-400: #3BCBCB; +$tao-turqoise-500: #10BFBF; +$tao-turqoise-600: #079995; +$tao-turqoise-700: #00726F; +$tao-turqoise-800: #004C4A; +$tao-turqoise-900: #002625; + +// Tao bright green palette +$tao-bright-green-50: #effbf7; +$tao-bright-green-100: #c5f2e4; +$tao-bright-green-200: #a0ead3; +$tao-bright-green-300: #7ae2c2; +$tao-bright-green-400: #55d9b0; +$tao-bright-green-500: #2fd19f; +$tao-bright-green-600: #2ab587; +$tao-bright-green-700: #248e63; +$tao-bright-green-800: #1c6844; +$tao-bright-green-900: #114431; + +// Tao warm yellow palette +$tao-warm-yellow-50: #FFF8EB; +$tao-warm-yellow-100: #FFEDCE; +$tao-warm-yellow-200: #FFE0A9; +$tao-warm-yellow-300: #FFD283; +$tao-warm-yellow-400: #FFC55E; +$tao-warm-yellow-500: #FFB83B; +$tao-warm-yellow-600: #E59C3C; +$tao-warm-yellow-700: #CC8B36; +$tao-warm-yellow-800: #B2762F; +$tao-warm-yellow-900: #996526; + +// Tao plum palette +$tao-plum-50: #F6F8FD; +$tao-plum-100: #DADFF8; +$tao-plum-200: #BEC7F3; +$tao-plum-300: #A2AFED; +$tao-plum-400: #8797E8; +$tao-plum-500: #6C80E3; +$tao-plum-600: #5E77BF; +$tao-plum-700: #4B5E99; +$tao-plum-800: #384672; +$tao-plum-900: #272F4C; + +// Tao pink palette +$tao-pink-50: #FFF0F7; +$tao-pink-100: #FFBFDF; +$tao-pink-200: #FF8FC6; +$tao-pink-300: #FF5EAE; +$tao-pink-400: #FF2E95; +$tao-pink-500: #FF007E; +$tao-pink-600: #D8007C; +$tao-pink-700: #B20066; +$tao-pink-800: #8C0050; +$tao-pink-900: #66003A; + +// Tao red palette +$tao-red-50: #FFF5F5; +$tao-red-100: #FFD4D4; +$tao-red-200: #FFB3B3; +$tao-red-300: #FF9292; +$tao-red-400: #FF7171; +$tao-red-500: #FF5252; +$tao-red-600: #E54848; +$tao-red-700: #CC3636; +$tao-red-800: #B22424; +$tao-red-900: #991919; + +// Tao gray palette +$tao-gray-50: #FAFAFA; +$tao-gray-100: #F2F2F2; +$tao-gray-200: #D6D6D6; +$tao-gray-300: #A0A0A0; +$tao-gray-400: #777777; +$tao-gray-500: #555555; +$tao-gray-600: #323232; +$tao-gray-700: #232323; +$tao-gray-800: #0C0C0C; +$tao-gray-900: #000000; + + +// Panel border radius +$tao-panel-border-radius: 14px; +$tao-panel-border-radius-sm: 8px; +$tao-input-border-radius: 6px; + +// Font sizes +$font-size-nano: 11px; +$font-size-tiny: 12px; +$font-size-small: 13px; +$font-size-base: 14px; +$font-size-title: floor(($font-size-base * 3.5)); +$font-size-h2: floor(($font-size-base * 1.75)); +$font-size-h3: floor(($font-size-base * 1.3)); +$font-size-h4: floor(($font-size-base * 1.2)); +$font-size-h5: floor(($font-size-base * 1.1)); + +// Custom sizes + +$tao-navbar-height: 67px; diff --git a/src/assets/scss/shared/_buttons.scss b/src/assets/scss/shared/_buttons.scss new file mode 100644 index 0000000..52742df --- /dev/null +++ b/src/assets/scss/shared/_buttons.scss @@ -0,0 +1,47 @@ +.tao-btn-primary { + color: $tao-blue-500; + font-size: $font-size-base; + padding: 6px 19px; + border-radius: 100px !important; + background-color: transparent; + border: 1px solid $tao-blue-500; + outline: none !important; + transition: all 0.18s ease-out 0.18s; + cursor: pointer; + + &.large { + font-size: $font-size-h3; + padding: 10px 32px; + } + + &.hidden { + visibility: hidden; + + } + + &.medium { + font-size: $font-size-h4; + padding: 8px 24px; + } + + &:hover { + background-color: transparent; + color: $tao-blue-500; + box-shadow: inset 0 0 0 1px $tao-blue-500; + } +} + +.tao-btn-rainbow { + @extend .tao-btn-primary; + background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%); + transition: all 2s ease; + color: white; + border: none; + text-decoration: none !important; + + &:hover { + box-shadow: none; + background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%); + color: white; + } +} diff --git a/src/index.html b/src/index.html index efb40db..f3d37a5 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,7 @@ - + diff --git a/src/styles.scss b/src/styles.scss index da171b7..8713ad3 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,5 @@ /* You can add global styles to this file, and also import other style files */ @import '../node_modules/bootstrap/scss/bootstrap'; @import '../node_modules/xterm/dist/xterm.css'; + +@import "assets/scss/main"; From b2d5da1262b295ee97f9848b3e85bceeaf3b40e6 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 16:25:44 +0100 Subject: [PATCH 2/7] Grid logo and title is centered using grid layout --- src/app/dashboard/dashboard.component.scss | 20 ++++ src/app/header/header.component.html | 19 ++-- src/app/header/header.component.scss | 103 +++++++++++++++------ src/assets/images/favicon.ico | Bin 5430 -> 1633 bytes src/assets/scss/_grid.scss | 44 +++++++++ src/assets/scss/_main.scss | 4 +- src/assets/scss/_variables.scss | 2 +- 7 files changed, 154 insertions(+), 38 deletions(-) mode change 100644 => 100755 src/assets/images/favicon.ico create mode 100644 src/assets/scss/_grid.scss diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 9d68c22..4a5b9de 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,5 +1,25 @@ +// +// Spaces +// + +$space: 24px; + +$sxlarge: 9 * $space; +$xxxlarge: 6 * $space; +$xxlarge: 4 * $space; +$xlarge: 2 * $space; +$large: 1.5 * $space; +$medium: $space; +$small: 0.75 * $space; +$tiny: 0.5 * $space; +$hair: 0.25 * $space; +$nano: 0.125 * $space; + +$tao-navbar-height: 67px; + .tfw-first-row { height: 40vh; + margin-top: $tao-navbar-height + $space; } .tfw-second-row {} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index b96b5f7..01e7202 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,8 +1,11 @@ -
-

Tutorial framework Demo

-

- Powered by Angular - -

-
- + diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 1920a5b..299f9d4 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -1,33 +1,80 @@ -@keyframes heartbeat -{ - 0% - { - transform: scale( .75 ); - } - 20% - { - transform: scale( 1 ); - } - 40% - { - transform: scale( .75 ); - } - 60% - { - transform: scale( 1 ); - } - 80% - { - transform: scale( .75 ); - } - 100% - { - transform: scale( .75 ); - } +// Variables + +// +// Spaces +// +$space: 24px; + +$sxlarge: 9 * $space; +$xxxlarge: 6 * $space; +$xxlarge: 4 * $space; +$xlarge: 2 * $space; +$large: 1.5 * $space; +$medium: $space; +$small: 0.75 * $space; +$tiny: 0.5 * $space; +$hair: 0.25 * $space; +$nano: 0.125 * $space; + +// +// Misc +// +$tao-blue-500: #277EEC; +$font-size-base: 14px; +$font-size-h4: floor(($font-size-base * 1.2)); + +$tao-navbar-height: 67px; + + +// +// Classes +// +.tao-header-title { + color: $tao-blue-500; + font-size: $font-size-h4; } -.logo { - animation: heartbeat 1s infinite; +.tao-navbar { + background-color: rgba(255, 255, 255, 0.96); + min-height: $tao-navbar-height; + box-shadow: 0px 1px 6px 0px #888; + margin-bottom: 12px; + border: 1px solid #e7e7e7; +} + +.tao-grid-navbar { + display: grid; + grid-template-columns: 10fr 1fr 10fr; + grid-column-gap: 8px; + width: 100%; +} + +.tao-company-logo { + display: block; + width: 130px; +} + +.tao-company-logo-mobile { + display: none; + width: 130px; +} + +@media (max-width: 767px) { + .tao-grid-navbar { + grid-template-columns: 1fr; + } + + .tao-company-logo { + display: none; + } + + .tao-company-logo-mobile { + display: block; + } + + .tao-navbar-links { + justify-self: left !important; + } } .jumbotron { diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico old mode 100644 new mode 100755 index 8081c7ceaf2be08bf59010158c586170d9d2d517..2971e83b49e7326c28bb7ecfba02cabee3fbd54f GIT binary patch literal 1633 zcmV-n2A=teP)6M#t00009a7bBm000XU z000XU0RWnu7ytkO8FWQhbW?9;ba!ELWdK2BZ(?O2No`?gWm08fWO;GPWjp`?1@1{i zK~#9!?44aqTtyVe57?#!`>_EjRBG5(P^(Bc^`lBuF2<-eCejCk;RQ6B7+*@&G*KVe zJ{gU%@X`luT6ode#B>`Q6HQIGR%^fnx0v7uC`($KQUnVsrKtwz(6i+B!fv;C&&;`- z`6m-LKz8Q-?wS9bxp(f|yqTF9kf7R~pNG{CED=>g^lN8oCMRj6|8GG3yr zu!xu-Q@Untf;p0-77gQ!kD}Q46}1N|iedAHVkj*tfHlR-p`-}Qvbn#Hj$c$|8qSSP z!^rpr=>2sJjt`Fo1G32|MzCA&UI+Kq+yI3I*Jb=)1diqQ%FFYkMhL^yg@2)^?{_%x z)es~`CdEL$;wl_P@sJ6)&5u>i0rNxsgA>s8*`S2zuJ=ZAi_Y3hmMw)ho~}`mTkQLH z;|Y7K@-8?WKMn7HF#w|%FNqoWv_X!Pu7VF=e~1OJTTeRcVDFCF+4_t_rrDjAytpxP z6YP2AzN`AKZ#_nN_d74$V+^!Ak{fhX_{6Pcu)S%c_5;NeY6`Sg$asJ+H{D^Z+onL{ zSfCv;WfiPefd{tpnLD*vL?+O0Hg7f($qsi#O||PGTznmXxthW zH4A%T+b!B`BL$h2z;lmOiJR)8ZD8-x37PHA2Sy7{lO^imEo=2ara_PIKsJ^cAM7&a z&zMr`h-6mC_gAk0$%@=uq&yR~z7z-uxG*NL zkfpBZ@#@F3lkAXLg^NriEBV{s>}xU*a)Psh6W^Z`4f#mV8GcXBc0Y*4>dXES(U3ps zJ*_RfIL1}M;KUU4^vU$*c=w2wKAsc@7*~MqJ2Id(PiFOH%rY=)MA=0A z)NC))2|3PP(eA_jv(Y0#nDKNR{aNpfk9IO)&9%_`cI`_T2aGH9U+d~MHm#0vSBAFH z@xc#9eYkD^ciPt~YlV#ZC~?XNXpG=j_k3&QF$eGC445-(c}N}CJKzdW9XDFhgV7=k zt+t=HsYs`;nm_&NEWG&cH>}fcw1>S12jKblx{W^0AmYIsTw&St_=YPUA@gIRfqAg5 zG%Zsk&)b8Dai_nmEaZXe(ySgaOXs`YeWP&T>!bv@86i7xd4D&fN{!sek(}$Ghebg4fIgN( zfH7!f?F5dXRdI4;Fhsx(1<$Y;$S&BJLq7}5_XZht$ORac6bG3=cT!gintgPrwl{cI zPsxN#pp#@DL5ON>-!|3W)&>417qTa+!>a5O3LD3euxe+z8^&yqS>F9bJJw>fpl_Sr zR28kPb)mQ9c-oA;k>h4XJ^NeC=w&Ym`zg(~fDs$b_O)>o7=Hv3vgaT$T2il! z1UI&rCBYOBe&)=W?zZQddb1?m8IQOMo`h?;<%M}|f=ZmO7>ZP$l-GB9PJsIro?a!m f7q0uQ{{$ESYP%%$v`;pP00000NkvXXu0mjfM^z0x literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- Date: Mon, 5 Mar 2018 16:26:05 +0100 Subject: [PATCH 3/7] Add missing avatao logo --- src/assets/images/avatao_logo.svg | 47 +++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100755 src/assets/images/avatao_logo.svg diff --git a/src/assets/images/avatao_logo.svg b/src/assets/images/avatao_logo.svg new file mode 100755 index 0000000..3aa8601 --- /dev/null +++ b/src/assets/images/avatao_logo.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + From eeaefac59e1d904bfe5317800ec7c0eee329d6d1 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Mon, 5 Mar 2018 16:56:27 +0100 Subject: [PATCH 4/7] Use grid layout instead of bootstrap columns --- src/app/dashboard/dashboard.component.html | 14 ++++---------- src/app/dashboard/dashboard.component.scss | 17 ++++++++++++++--- src/app/header/header.component.html | 8 ++++---- src/app/header/header.component.scss | 6 +++--- src/app/webide/webide.component.scss | 2 +- 5 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 8420599..3a77223 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,12 +1,6 @@ -
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 4a5b9de..6c0d81f 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -17,9 +17,20 @@ $nano: 0.125 * $space; $tao-navbar-height: 67px; -.tfw-first-row { - height: 40vh; +.tao-grid-components { + display: grid; margin-top: $tao-navbar-height + $space; + grid-template-columns: 1fr 2fr 2fr; + grid-column-gap: $space; + width: 100%; } -.tfw-second-row {} +.tao-grid-middle-component { + display: grid; + width: 100%; + grid-template-columns: 1fr; + grid-template-rows: auto; + align-items: start; + justify-items: center; + justify-content: center; +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 01e7202..bbec9fe 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,11 +1,11 @@ diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index 299f9d4..2da33d4 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -21,7 +21,7 @@ $nano: 0.125 * $space; // $tao-blue-500: #277EEC; $font-size-base: 14px; -$font-size-h4: floor(($font-size-base * 1.2)); +$font-size-h3: floor(($font-size-base * 1.3)); $tao-navbar-height: 67px; @@ -31,7 +31,7 @@ $tao-navbar-height: 67px; // .tao-header-title { color: $tao-blue-500; - font-size: $font-size-h4; + font-size: $font-size-h3; } .tao-navbar { @@ -44,7 +44,7 @@ $tao-navbar-height: 67px; .tao-grid-navbar { display: grid; - grid-template-columns: 10fr 1fr 10fr; + grid-template-columns: 1fr 1fr; grid-column-gap: 8px; width: 100%; } diff --git a/src/app/webide/webide.component.scss b/src/app/webide/webide.component.scss index f4e8af5..6008505 100644 --- a/src/app/webide/webide.component.scss +++ b/src/app/webide/webide.component.scss @@ -1,5 +1,5 @@ .tfw-ace-editor { - min-height: 30vh; + min-height: 100vh; height: 80%; width: 100%; overflow: auto; From 1adb32a410922190ac664697f1010967f64fcc27 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:18:51 +0100 Subject: [PATCH 5/7] Use grid layout for messages --- src/app/messages/messages.component.html | 20 +-- src/app/messages/messages.component.scss | 193 ++++++++++++++++++++++- src/assets/images/avataobot.svg | 1 + 3 files changed, 196 insertions(+), 18 deletions(-) mode change 100644 => 100755 src/app/messages/messages.component.html mode change 100644 => 100755 src/app/messages/messages.component.scss create mode 100755 src/assets/images/avataobot.svg diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html old mode 100644 new mode 100755 index 733d749..611e077 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -1,11 +1,11 @@ -
-
    -
  • -

    - {{message.originator}} - {{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
    - -

    -
    • -
+
+
Instructions
+
+
+ +
{{message.originator}}
+
{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
+
+
+
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss old mode 100644 new mode 100755 index 3cc4d7a..8e4eb5c --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -1,14 +1,191 @@ -div { +// +// Spaces +// + +$space: 24px; + +$sxlarge: 9 * $space; +$xxxlarge: 6 * $space; +$xxlarge: 4 * $space; +$xlarge: 2 * $space; +$large: 1.5 * $space; +$medium: $space; +$small: 0.75 * $space; +$tiny: 0.5 * $space; +$hair: 0.25 * $space; +$nano: 0.125 * $space; + + +// Color system + +// Tao blue palette +$tao-blue-50: #F2F7FE; +$tao-blue-100: #C9DFFA; +$tao-blue-200: #A0C6F7; +$tao-blue-300: #77AEF3; +$tao-blue-400: #4E95EF; +$tao-blue-500: #277EEC; +$tao-blue-600: #2170B7; +$tao-blue-700: #195684; +$tao-blue-800: #103B5B; +$tao-blue-900: #081A2B; + +// Tao sky palette +$tao-sky-50: #F1FAFD; +$tao-sky-100: #C5E9F5; +$tao-sky-200: #9AD8EE; +$tao-sky-300: #6EC7E6; +$tao-sky-400: #42B7DF; +$tao-sky-500: #19A7D8; +$tao-sky-600: #0E8BA8; +$tao-sky-700: #04647A; +$tao-sky-800: #004251; +$tao-sky-900: #002028; + +// Tao phtalo palette +$tao-phtalo-50: #F2FBFC; +$tao-phtalo-100: #C8EDF1; +$tao-phtalo-200: #9FDFE6; +$tao-phtalo-300: #75D1DB; +$tao-phtalo-400: #4CC3D0; +$tao-phtalo-500: #24B6C6; +$tao-phtalo-600: #16989E; +$tao-phtalo-700: #0C7575; +$tao-phtalo-800: #034C4F; +$tao-phtalo-900: #002426; + +// Tao turqoise palette +$tao-turqoise-50: #F1FBFB; +$tao-turqoise-100: #C3EFEF; +$tao-turqoise-200: #96E3E3; +$tao-turqoise-300: #68D7D7; +$tao-turqoise-400: #3BCBCB; +$tao-turqoise-500: #10BFBF; +$tao-turqoise-600: #079995; +$tao-turqoise-700: #00726F; +$tao-turqoise-800: #004C4A; +$tao-turqoise-900: #002625; + +// Tao bright green palette +$tao-bright-green-50: #effbf7; +$tao-bright-green-100: #c5f2e4; +$tao-bright-green-200: #a0ead3; +$tao-bright-green-300: #7ae2c2; +$tao-bright-green-400: #55d9b0; +$tao-bright-green-500: #2fd19f; +$tao-bright-green-600: #2ab587; +$tao-bright-green-700: #248e63; +$tao-bright-green-800: #1c6844; +$tao-bright-green-900: #114431; + +// Tao warm yellow palette +$tao-warm-yellow-50: #FFF8EB; +$tao-warm-yellow-100: #FFEDCE; +$tao-warm-yellow-200: #FFE0A9; +$tao-warm-yellow-300: #FFD283; +$tao-warm-yellow-400: #FFC55E; +$tao-warm-yellow-500: #FFB83B; +$tao-warm-yellow-600: #E59C3C; +$tao-warm-yellow-700: #CC8B36; +$tao-warm-yellow-800: #B2762F; +$tao-warm-yellow-900: #996526; + +// Tao plum palette +$tao-plum-50: #F6F8FD; +$tao-plum-100: #DADFF8; +$tao-plum-200: #BEC7F3; +$tao-plum-300: #A2AFED; +$tao-plum-400: #8797E8; +$tao-plum-500: #6C80E3; +$tao-plum-600: #5E77BF; +$tao-plum-700: #4B5E99; +$tao-plum-800: #384672; +$tao-plum-900: #272F4C; + +// Tao pink palette +$tao-pink-50: #FFF0F7; +$tao-pink-100: #FFBFDF; +$tao-pink-200: #FF8FC6; +$tao-pink-300: #FF5EAE; +$tao-pink-400: #FF2E95; +$tao-pink-500: #FF007E; +$tao-pink-600: #D8007C; +$tao-pink-700: #B20066; +$tao-pink-800: #8C0050; +$tao-pink-900: #66003A; + +// Tao red palette +$tao-red-50: #FFF5F5; +$tao-red-100: #FFD4D4; +$tao-red-200: #FFB3B3; +$tao-red-300: #FF9292; +$tao-red-400: #FF7171; +$tao-red-500: #FF5252; +$tao-red-600: #E54848; +$tao-red-700: #CC3636; +$tao-red-800: #B22424; +$tao-red-900: #991919; + +// Tao gray palette +$tao-gray-50: #FAFAFA; +$tao-gray-100: #F2F2F2; +$tao-gray-200: #D6D6D6; +$tao-gray-300: #A0A0A0; +$tao-gray-400: #777777; +$tao-gray-500: #555555; +$tao-gray-600: #323232; +$tao-gray-700: #232323; +$tao-gray-800: #0C0C0C; +$tao-gray-900: #000000; + +// Panel border radius +$tao-panel-border-radius: 14px; +$tao-panel-border-radius-sm: 8px; +$tao-input-border-radius: 6px; + +$font-size-nano: 11px; +$font-size-tiny: 12px; +$font-size-small: 13px; +$font-size-base: 14px; + + +.tao-messages-main { display: block; overflow: auto; - max-height: 100%; + + h5 { + margin-bottom: $small; + color: $tao-blue-500; + font-weight: 500; + } +} +.tao-grid-message { + display: grid; + grid-template-rows: 1fr auto; + grid-row-gap: $nano; + width: 100%; + + background-color: $tao-gray-100; + border-radius: $tao-panel-border-radius-sm; + padding: $tiny; + font-size: $font-size-base; + margin-bottom: $small; } -ul { - max-height: inherit; - list-style-type: none; +.tao-grid-message-header { + display: grid; + grid-template-columns: 1fr 5fr 8fr; + grid-column-gap: 0; + width: 100%; + + img { + width: 12px; + } + + .timestamp { + font-size: $font-size-tiny; + opacity: 0.37; + } + } -.timestamp { - opacity: 0.37; -} diff --git a/src/assets/images/avataobot.svg b/src/assets/images/avataobot.svg new file mode 100755 index 0000000..70bbbe2 --- /dev/null +++ b/src/assets/images/avataobot.svg @@ -0,0 +1 @@ +avataobot \ No newline at end of file From 603cdb99114d0127af3c2b6c7f9cc7ed1722c755 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:20:43 +0100 Subject: [PATCH 6/7] New grid layout for dashboard. This is only one suggested template view. Use cases may need different ones --- src/app/dashboard/dashboard.component.html | 15 +- src/app/dashboard/dashboard.component.scss | 157 +++++++++++++++++++-- 2 files changed, 159 insertions(+), 13 deletions(-) mode change 100644 => 100755 src/app/dashboard/dashboard.component.html mode change 100644 => 100755 src/app/dashboard/dashboard.component.scss diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html old mode 100644 new mode 100755 index 3a77223..ac963db --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,6 +1,13 @@ -
-
-
-
+
+
+
+
+
+
+
+
+
+
+ diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss old mode 100644 new mode 100755 index 6c0d81f..684d562 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -15,22 +15,161 @@ $tiny: 0.5 * $space; $hair: 0.25 * $space; $nano: 0.125 * $space; +// Color system + +// Tao blue palette +$tao-blue-50: #F2F7FE; +$tao-blue-100: #C9DFFA; +$tao-blue-200: #A0C6F7; +$tao-blue-300: #77AEF3; +$tao-blue-400: #4E95EF; +$tao-blue-500: #277EEC; +$tao-blue-600: #2170B7; +$tao-blue-700: #195684; +$tao-blue-800: #103B5B; +$tao-blue-900: #081A2B; + +// Tao sky palette +$tao-sky-50: #F1FAFD; +$tao-sky-100: #C5E9F5; +$tao-sky-200: #9AD8EE; +$tao-sky-300: #6EC7E6; +$tao-sky-400: #42B7DF; +$tao-sky-500: #19A7D8; +$tao-sky-600: #0E8BA8; +$tao-sky-700: #04647A; +$tao-sky-800: #004251; +$tao-sky-900: #002028; + +// Tao phtalo palette +$tao-phtalo-50: #F2FBFC; +$tao-phtalo-100: #C8EDF1; +$tao-phtalo-200: #9FDFE6; +$tao-phtalo-300: #75D1DB; +$tao-phtalo-400: #4CC3D0; +$tao-phtalo-500: #24B6C6; +$tao-phtalo-600: #16989E; +$tao-phtalo-700: #0C7575; +$tao-phtalo-800: #034C4F; +$tao-phtalo-900: #002426; + +// Tao turqoise palette +$tao-turqoise-50: #F1FBFB; +$tao-turqoise-100: #C3EFEF; +$tao-turqoise-200: #96E3E3; +$tao-turqoise-300: #68D7D7; +$tao-turqoise-400: #3BCBCB; +$tao-turqoise-500: #10BFBF; +$tao-turqoise-600: #079995; +$tao-turqoise-700: #00726F; +$tao-turqoise-800: #004C4A; +$tao-turqoise-900: #002625; + +// Tao bright green palette +$tao-bright-green-50: #effbf7; +$tao-bright-green-100: #c5f2e4; +$tao-bright-green-200: #a0ead3; +$tao-bright-green-300: #7ae2c2; +$tao-bright-green-400: #55d9b0; +$tao-bright-green-500: #2fd19f; +$tao-bright-green-600: #2ab587; +$tao-bright-green-700: #248e63; +$tao-bright-green-800: #1c6844; +$tao-bright-green-900: #114431; + +// Tao warm yellow palette +$tao-warm-yellow-50: #FFF8EB; +$tao-warm-yellow-100: #FFEDCE; +$tao-warm-yellow-200: #FFE0A9; +$tao-warm-yellow-300: #FFD283; +$tao-warm-yellow-400: #FFC55E; +$tao-warm-yellow-500: #FFB83B; +$tao-warm-yellow-600: #E59C3C; +$tao-warm-yellow-700: #CC8B36; +$tao-warm-yellow-800: #B2762F; +$tao-warm-yellow-900: #996526; + +// Tao plum palette +$tao-plum-50: #F6F8FD; +$tao-plum-100: #DADFF8; +$tao-plum-200: #BEC7F3; +$tao-plum-300: #A2AFED; +$tao-plum-400: #8797E8; +$tao-plum-500: #6C80E3; +$tao-plum-600: #5E77BF; +$tao-plum-700: #4B5E99; +$tao-plum-800: #384672; +$tao-plum-900: #272F4C; + +// Tao pink palette +$tao-pink-50: #FFF0F7; +$tao-pink-100: #FFBFDF; +$tao-pink-200: #FF8FC6; +$tao-pink-300: #FF5EAE; +$tao-pink-400: #FF2E95; +$tao-pink-500: #FF007E; +$tao-pink-600: #D8007C; +$tao-pink-700: #B20066; +$tao-pink-800: #8C0050; +$tao-pink-900: #66003A; + +// Tao red palette +$tao-red-50: #FFF5F5; +$tao-red-100: #FFD4D4; +$tao-red-200: #FFB3B3; +$tao-red-300: #FF9292; +$tao-red-400: #FF7171; +$tao-red-500: #FF5252; +$tao-red-600: #E54848; +$tao-red-700: #CC3636; +$tao-red-800: #B22424; +$tao-red-900: #991919; + +// Tao gray palette +$tao-gray-50: #FAFAFA; +$tao-gray-100: #F2F2F2; +$tao-gray-200: #D6D6D6; +$tao-gray-300: #A0A0A0; +$tao-gray-400: #777777; +$tao-gray-500: #555555; +$tao-gray-600: #323232; +$tao-gray-700: #232323; +$tao-gray-800: #0C0C0C; +$tao-gray-900: #000000; + $tao-navbar-height: 67px; -.tao-grid-components { +.tao-grid-main-components { display: grid; - margin-top: $tao-navbar-height + $space; - grid-template-columns: 1fr 2fr 2fr; - grid-column-gap: $space; + margin-top: $tao-navbar-height; + grid-template-columns: 3fr 2fr; + grid-column-gap: 0; width: 100%; } -.tao-grid-middle-component { + +.tao-grid-main-left-components { display: grid; width: 100%; + height: 100vh; grid-template-columns: 1fr; - grid-template-rows: auto; - align-items: start; - justify-items: center; - justify-content: center; + grid-template-rows: 1fr 1fr; + grid-row-gap: 0; +} + +.tao-grid-inner-left-components { + display: grid; + width: 100%; + grid-template-columns: 1fr 2fr; + grid-auto-rows: auto; + grid-template-rows: auto; +} + +.tao-messages-component { + background-color: $tao-gray-50; + padding: $space; +} + +.tao-web-component { + padding: $space; } From ed8f09b11de812ec3a204350b6f4c6e23a80e075 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:22:20 +0100 Subject: [PATCH 7/7] Logo is aligned to the left in the header, but still using grid layout --- src/app/header/header.component.html | 4 ++-- src/app/header/header.component.scss | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) mode change 100644 => 100755 src/app/header/header.component.html mode change 100644 => 100755 src/app/header/header.component.scss diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html old mode 100644 new mode 100755 index bbec9fe..bb24607 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -3,8 +3,8 @@ - -
    + +
    • Tutorials
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss old mode 100644 new mode 100755 index 2da33d4..6732de0 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -25,6 +25,7 @@ $font-size-h3: floor(($font-size-base * 1.3)); $tao-navbar-height: 67px; +$company-logo-width: 130px; // // Classes @@ -44,14 +45,14 @@ $tao-navbar-height: 67px; .tao-grid-navbar { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: $company-logo-width 1fr; grid-column-gap: 8px; width: 100%; } .tao-company-logo { display: block; - width: 130px; + width: $company-logo-width; } .tao-company-logo-mobile {