kj
/
lms-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Home page UI

master
kj1352 5 years ago
parent
035ad42e68
commit
01e225c5ff
3 changed files with 101 additions and 22 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +74
    -10
      src/app/tabs/home/home.component.html
  2. +27
    -1
      src/app/tabs/home/home.component.scss
  3. +0
    -11
      src/app/welcome/welcome.component.scss

+ 74
- 10
src/app/tabs/home/home.component.html View File

@@ -19,9 +19,9 @@
</section>

<ul class="subject-list">
<header> <h5> Latest Classes: </h5> </header>
<header> <h5> Today's Classes: </h5> </header>

<li>
<li class="attended">
<div class="schedule">
<label> 3:30 PM </label>
<p> 40 Minutes </p>
@@ -33,10 +33,10 @@
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> View </button>
<button class="view-button"> Watch </button>
</li>

<li>
<li class="absent">
<div class="schedule">
<label> 4:20 PM </label>
<p> 40 Minutes </p>
@@ -48,12 +48,12 @@
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> View </button>
<button class="view-button"> Watch </button>
</li>

<header> <h5> Today: </h5> </header>
<header> <h5> Yesterday: </h5> </header>

<li>
<li class="late">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
@@ -65,10 +65,10 @@
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> View </button>
<button class="view-button"> Watch </button>
</li>

<li>
<li class="attended">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
@@ -80,6 +80,70 @@
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> View </button>
<button class="view-button"> Watch </button>
</li>

<header> <h5> Mon, March 29: </h5> </header>

<li class="attended">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<li class="late">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<header> <h5> Sat, March 27: </h5> </header>

<li class="absent">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<li class="absent">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
</ul>

+ 27
- 1
src/app/tabs/home/home.component.scss View File

@@ -38,6 +38,10 @@
align-items: center;
justify-content: center;
color: white;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1;

.tutor {
position: absolute;
@@ -78,7 +82,7 @@

.subject-list {
position: relative;
width: 90%;
width: 88%;
margin: 0 auto;
list-style: none;

@@ -107,6 +111,28 @@
box-shadow: 0px 0px 5px -2px var(--black);
justify-content: space-between;
position: relative;

&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 7px;
height: 100%;
background-color: transparent;
}

&.attended::before {
background-color: var(--teal-green);
}

&.absent::before {
background-color: rgba(red, 0.5);
}

&.late::before {
background-color: rgba(orange, 0.5);
}
}

.schedule {


+ 0
- 11
src/app/welcome/welcome.component.scss View File

@@ -15,17 +15,6 @@
border-bottom-right-radius: 30px;
pointer-events: none;
}

&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 70px;
pointer-events: none;
width: 100%;
background: linear-gradient(0deg, white, transparent);
}
}

.upfold {