kj
/
lms-app
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

Calendar UI changes

master
kj1352 5 år sedan
förälder
cb554a3ecf
incheckning
d6948f2406
6 ändrade filer med 216 tillägg och 90 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +23
    -19
      .firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache
  2. +31
    -29
      src/app/calendar/calendar.component.html
  3. +32
    -42
      src/app/calendar/calendar.component.scss
  4. +41
    -0
      src/assets/custom-icons/close-circle.svg
  5. +49
    -0
      src/assets/custom-icons/question-mark.svg
  6. +40
    -0
      src/assets/custom-icons/warning.svg

+ 23
- 19
.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache Visa fil

@@ -1,18 +1,9 @@
favicon.ico,1591660351498,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7
index.html,1591723925436,dd62ea39dc9fb3c8f1de0598c0e8e17c304e3dd08ff918b39ed16e303a0da7d5
manifest.webmanifest,1591723813630,648e3277153af7b5ba06a2fb0a1da6b89f858f631f124008b5d5726744ab43f4
ngsw.json,1591723925456,84f8a687e4ef85e4016dfcb6a934ca40b0b8e4956bdb159fe9ff3a8dcedb3fa5
3rdpartylicenses.txt,1591723915550,25cfb16f34dfd006ac8df880c23735d9fd75be3aa69fcfbd2f13b9b42add2368
polyfills-es2015.690002c25ea8557bb4b0.js,1591723916477,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e
runtime-es2015.1eba213af0b233498d9d.js,1591723916220,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
runtime-es5.1eba213af0b233498d9d.js,1591723916310,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
safety-worker.js,1591723925458,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
styles.39830a50db7cf7fbf8fe.css,1591723915550,bd7a8170a542a3f1a9fdaccb24d97d52fb2ee971af7395b990901ed8cbc9f695
worker-basic.min.js,1591723925458,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
assets/custom-icons/add.svg,1591670038987,0beaf5cea5310deddf58f5dc94cffc2c26cecfaa5890aae565ab9705ee342506
assets/custom-icons/atomic.svg,1591670021393,48c2717734d3d37cbf7dabaf6fb22f0e5fcd662e319e9e61417c46461e236d8d
assets/custom-icons/bell.svg,1591670027237,573c0d8ec1b109c2f5aac611060deb690b999477044e413cb4876cb1ef56fc8b
assets/custom-icons/balance-sheet.svg,1591670023346,bc016780bfc19a6ef0e62332aa22139bcc237a6e19f070e51ce90e76919c66aa
assets/custom-icons/bell.svg,1591670027237,573c0d8ec1b109c2f5aac611060deb690b999477044e413cb4876cb1ef56fc8b
assets/custom-icons/book (1).svg,1591670042956,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
assets/custom-icons/book.svg,1591670046795,929aa072b6ed981800c87d0586c1f3a2485eb2698e134de2f3b8be20cb7d703b
assets/custom-icons/calendar.svg,1591670019330,86593b34bb094a0308ff9aae96b373e7561d95737a97b62c5df257d9aa94730c
@@ -29,22 +20,35 @@ assets/custom-icons/folder.svg,1591670036971,ff596b961aa3bf39968e69c946ca3197b64
assets/custom-icons/globe.svg,1591670048690,1fdc780fc12f486a70f2825e51064c7ebe497e6db5a308c2ffa5b6d86a552b41
assets/custom-icons/home.svg,1591677387594,fcc78971c4496f782b894d47df39954b657488ceaa83189092978429c600493f
assets/custom-icons/information.svg,1591670056330,2fb0cdf7a54fb27fcd5461b379a57dda72483f48e400217db1162fe2416b30ea
assets/custom-icons/microscope.svg,1591670031112,8e3dfe16b2ff42e4a83050df2370c06c3251c106139bba9ff570db866135e031
assets/custom-icons/money-growth.svg,1591670040955,fce9616268c9932e2531ff524accdb5a82ecbee149eb68100580146f09b85d9a
assets/custom-icons/more.svg,1591677116018,8207372ec5304a64d33da1b21c92308d793d03f6cb83e0dd7c384f4db94de3f2
assets/custom-icons/mortarboard.svg,1591670033049,226d6ad39b7ea5f7da6321237835319335d29a6571dce10378a88c42b5be4f2e
assets/custom-icons/microscope.svg,1591670031112,8e3dfe16b2ff42e4a83050df2370c06c3251c106139bba9ff570db866135e031
assets/custom-icons/play-button.svg,1591670044893,247291e419f46dbc2166588629cc5a21c19b0ec8a87e3ffe95a5b7c3fa4d5b52
assets/custom-icons/newspaper.svg,1591670054424,3b6d1b91044b650e42124be91b5161d988e2f900cff843f74018ce614216527c
assets/custom-icons/play-button.svg,1591670044893,247291e419f46dbc2166588629cc5a21c19b0ec8a87e3ffe95a5b7c3fa4d5b52
assets/custom-icons/tab.svg,1591670015221,e521af92e8d3b8cf4f57a85f1091e3839200f65b52a3177703a02233783660f0
assets/icons/icon-144x144.png,1591723765602,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f
assets/icons/icon-128x128.png,1591723765595,1331bbcee85eb4c732d2b2468c0118ead141aa56c741dc1a93a54d4812e79d4d
assets/icons/icon-192x192.png,1591723765604,5b2471e9386f4fe3dcf1d2151c7048c3cc22d3c504161debeca3af3a2efd0a04
assets/icons/icon-144x144.png,1591723765602,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f
assets/icons/icon-152x152.png,1591723765603,b1cb2eb328c9eedac5eb3994d04c73040c462a73cf7254c38eafa2d582a078d6
assets/icons/icon-192x192.png,1591723765604,5b2471e9386f4fe3dcf1d2151c7048c3cc22d3c504161debeca3af3a2efd0a04
assets/icons/icon-384x384.png,1591723765605,e28ae36bf6b6f9c9a5eb8716806f3077d2932c9723f89d0c0275fbde43dcdce9
assets/icons/icon-512x512.png,1591723765605,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9
assets/icons/icon-72x72.png,1591723765606,215a8d62891dff36be3e0a554c28e627bbd34dea95aca21b718414452b581dce
assets/icons/icon-96x96.png,1591723765606,5dbec692238f9b1305461df3fe87c910306d95db26941804b8929cd0d99bd508
assets/icons/icon-512x512.png,1591723765605,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9
polyfills-es5.9e286f6d9247438cbb02.js,1591723919569,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8
ngsw-worker.js,1591723925457,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
main-es2015.910cc19d4ed4092109c8.js,1591723923481,6dad9eb6e6cb8aff2b7454e890abb7fae1bc105144172129133c1863b28c1c48
main-es5.910cc19d4ed4092109c8.js,1591723922556,3f535c49f709b5b51a98383c5fd0924f295ceac0fe5de44872c4658903e6ce8b
index.html,1591859976810,d1b6a2ca3180b5631b7d3d345574ee2faaf2bbb302331f8a531e9e12bc78ded4
3rdpartylicenses.txt,1591859967077,25cfb16f34dfd006ac8df880c23735d9fd75be3aa69fcfbd2f13b9b42add2368
ngsw.json,1591859976831,03c739de8c383926f715a64a9e210e87627ba55104fbd16a6004987413d295fd
polyfills-es2015.690002c25ea8557bb4b0.js,1591723916472,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e
runtime-es2015.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
runtime-es5.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
safety-worker.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
styles.7003c259858c27ffbfcc.css,1591859967077,5d9cdd8c0befba4473e41fc8f531ae8236ff2178638d85d994314960504e15eb
worker-basic.min.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
assets/custom-icons/number-1-medal.svg,1591857318704,f52fb954e5e12c14af3671c2b419248932f49255049bcc820d9e50ae3f319200
assets/custom-icons/plus.svg,1591852726572,a96d4d299742c206fe67437318fb570cc69359356a7f6ab9ccde30deee8e0af6
assets/custom-icons/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20
assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046
polyfills-es5.9e286f6d9247438cbb02.js,1591723919562,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8
ngsw-worker.js,1591859976831,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
main-es2015.2f069b420a31c7186041.js,1591859975039,ff2a96ec3176a11f611fa254963df3232c6988e6ff0dcd1683ac664bb514db32
main-es5.2f069b420a31c7186041.js,1591859974085,e5bfec9a6e904739a094b68fe0a1445f5a02d308b1c10a403344cf3d20135b4e

+ 31
- 29
src/app/calendar/calendar.component.html Visa fil

@@ -9,66 +9,68 @@
</button>
</header>

<h2 class="calendar-header">
{{ selectedMonth }} {{ selectedYear }}
</h2>
<div class="calendar-holder">
<h2 class="calendar-header">
{{ selectedMonth }} {{ selectedYear }}
</h2>

<section class="mini-calendar">
<div class="days">
<span> S </span><span> M </span><span> T </span><span> W </span>
<span> T </span><span> F </span><span> S </span>
</div>
<div class="dates">
<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth && currentYear === selectedYear,
'active': selectedDate === selectedMonthDay }"
*ngFor="let selectedMonthDay of selectedMonthDays"
(click)="selectedDate = selectedMonthDay">
{{ selectedMonthDay }}
</span>
<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
{{ succeedingDay }}
</span>
</div>
</section>
<section class="mini-calendar">
<div class="days">
<span> S </span><span> M </span><span> T </span><span> W </span>
<span> T </span><span> F </span><span> S </span>
</div>
<div class="dates">
<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth && currentYear === selectedYear,
'active': selectedDate === selectedMonthDay }"
*ngFor="let selectedMonthDay of selectedMonthDays"
(click)="selectedDate = selectedMonthDay">
{{ selectedMonthDay }}
</span>
<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
{{ succeedingDay }}
</span>
</div>
</section>
</div>

<section class="schedule-details">
<header> {{ selectedDate }}, {{ selectedMonth }} {{ selectedYear }} </header>
<ul>
<li class="attended">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="content">
<label> Mathematics class </label>
<p> 8:00 AM to 10:00 AM </p>
</div>
<button> Attended </button>
</li>

<li class="absent">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<div class="content">
<label> Physics class </label>
<p> 11:00 AM to 1:00 PM </p>
</div>
<button> Absent </button>
</li>

<li class="late">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
<div class="content">
<label> Chemistry class </label>
<p> 2:00 PM to 3:00 PM </p>
</div>
<button> Late </button>
</li>

<li class="progress">
<svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<div class="content">
<label> Social Science class </label>
<p> 4:00 AM to 5:00 PM </p>
</div>
<button> In Progress </button>
</li>
</ul>
</section>


+ 32
- 42
src/app/calendar/calendar.component.scss Visa fil

@@ -11,10 +11,6 @@
align-items: center;
padding: 0 5%;
height: 60px;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1;

.close-button {
border: 0px;
@@ -41,6 +37,15 @@
}
}

.calendar-holder {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: var(--ash-black);
left: 0;
padding-top: 15px;
}

.calendar-header {
color: white;
font-size: 18px;
@@ -119,10 +124,22 @@
.schedule-details {
max-height: calc(100vh - 60px);
background-color: white;
padding: 20px 5% 100px;
padding: 40px 5% 100px;
overflow: auto;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
position: relative;

&::before {
content: '';
position: absolute;
width: 60px;
height: 4px;
border-radius: 30px;
background-color: var(--light-grey);
left: calc(50% - 30px);
top: 20px;
}

header {
color: var(--dark-grey);
@@ -144,59 +161,42 @@
position: relative;

&.attended {
button {
background-color: var(--green);
.status-icon {
fill: var(--green);
}

&::before {
border-color: var(--green);
}

.checkmark {
fill: var(--green);
}
}

&.absent {
button {
background-color: rgba(red, 0.5);
.status-icon {
fill: rgba(red, 0.5);
}

&::before {
border-color: rgba(red, 0.5);
}

.checkmark {
fill: rgba(red, 0.5);
}
}

&.late {
button {
background-color: rgba(orange, 0.5);
.status-icon {
fill: rgba(orange, 0.5);
}

&::before {
border-color: rgba(orange, 0.5);
}

.checkmark {
fill: rgba(orange, 0.5);
}
}

&.progress {
button {
background-color: var(--teal);
.status-icon {
fill: var(--teal);
}

&::before {
border-color: var(--teal);
}

.checkmark {
fill: var(--teal);
}
}

&:last-child::before {
@@ -214,26 +214,16 @@
}

.icon {
background-color: white;
z-index: 1;
position: relative;
width: 20px;
height: 20px;
fill: var(--light-grey);
}

button {
border-radius: 20px;
width: 90px;
height: 25px;
font-size: 12px;
border: 0px;
color: white;
background-color: var(--light-grey);
background-color: white;
}

.content {
width: calc(100% - 40px - 120px);
width: calc(100% - 40px);
}

label {


+ 41
- 0
src/assets/custom-icons/close-circle.svg Visa fil

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="33px" height="33px" viewBox="0 0 33 33" style="enable-background:new 0 0 33 33;" xml:space="preserve">
<g>
<path d="M16.5,0C7.388,0,0,7.388,0,16.5C0,25.611,7.388,33,16.5,33C25.611,33,33,25.611,33,16.5C33,7.388,25.611,0,16.5,0z
M25.643,22.107l-3.535,3.535L16.5,20.035l-5.607,5.607l-3.535-3.535l5.607-5.607l-5.607-5.607l3.535-3.535l5.607,5.607
l5.607-5.607l3.535,3.535L20.035,16.5L25.643,22.107z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 49
- 0
src/assets/custom-icons/question-mark.svg Visa fil

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="98.27px" height="98.27px" viewBox="0 0 98.27 98.27" style="enable-background:new 0 0 98.27 98.27;" xml:space="preserve"
>
<g>
<path d="M49.135,0C21.998,0,0,21.999,0,49.135S21.998,98.27,49.135,98.27c27.136,0,49.134-21.999,49.134-49.135S76.27,0,49.135,0z
M53.234,82.086c-1.539,1.521-3.684,2.293-6.369,2.293c-2.746,0-4.918-0.754-6.456-2.241c-1.545-1.495-2.328-3.604-2.328-6.269
c0-2.754,0.769-4.887,2.284-6.336c1.51-1.44,3.696-2.172,6.5-2.172c2.714,0,4.861,0.746,6.386,2.219
c1.528,1.479,2.304,3.596,2.304,6.289C55.555,78.472,54.773,80.564,53.234,82.086z M68.424,40.295
c-1.572,2.511-4.566,5.354-8.9,8.45c-2.817,2.083-4.627,3.684-5.355,4.74c-0.686,0.995-1.034,2.346-1.034,4.014v1.98
c0,0.828-0.672,1.5-1.5,1.5H41.045c-0.828,0-1.5-0.672-1.5-1.5v-2.621c0-3.041,0.663-5.732,1.972-8
c1.296-2.244,3.665-4.638,7.043-7.116c3.135-2.239,5.209-4.06,6.183-5.422c0.923-1.297,1.392-2.768,1.392-4.369
c0-1.742-0.615-3.024-1.881-3.92c-1.329-0.941-3.246-1.419-5.698-1.419c-4.252,0-9.173,1.366-14.624,4.061
c-0.739,0.366-1.639,0.064-2.008-0.676l-4.316-8.67c-0.36-0.725-0.082-1.604,0.63-1.988c6.689-3.614,13.864-5.447,21.325-5.447
c6.421,0,11.613,1.578,15.434,4.69c3.864,3.15,5.825,7.402,5.825,12.639C70.82,34.697,70.014,37.749,68.424,40.295z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 40
- 0
src/assets/custom-icons/warning.svg Visa fil

@@ -0,0 +1,40 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 295.428 295.428" style="enable-background:new 0 0 295.428 295.428;" xml:space="preserve">
<path d="M147.714,0C66.264,0,0,66.264,0,147.714s66.264,147.714,147.714,147.714c81.45,0,147.714-66.264,147.714-147.714
S229.164,0,147.714,0z M147.714,232.68c-8.284,0-15-6.716-15-15c0-8.284,6.716-15,15-15c8.284,0,15,6.716,15,15
C162.714,225.964,155.998,232.68,147.714,232.68z M162.714,155.68c0,8.284-6.716,15-15,15c-8.284,0-15-6.716-15-15v-79
c0-8.284,6.716-15,15-15c8.284,0,15,6.716,15,15V155.68z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>