Skip to content
This repository has been archived by the owner on Jul 9, 2024. It is now read-only.

Commit

Permalink
feat: declutter the list view
Browse files Browse the repository at this point in the history
  • Loading branch information
@adil192
adil192 committed Jan 28, 2024
1 parent 6cb00ed commit b484536
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 38 deletions.
78 changes: 60 additions & 18 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,11 @@
border: none;
background-color: #f2e9f6;
color: #1d1b1e;
margin: 0 !important;
transition: background-color 0.1 ease-out;
transition: background-color 0.1s ease-out;
box-shadow: none !important;
height: auto !important;
min-height: 0;
--box-shadow: 1rem;
}
.course-org-list .course-element-card .course-banner {
border-top-left-radius: inherit;
Expand All @@ -199,10 +200,9 @@
.course-org-list .course-element-card .summary {
background-color: inherit;
border-radius: inherit;
margin-top: -1rem !important;
min-height: 7.5rem;
z-index: 1;
transition: background-color 0.1 ease-out;
transition: background-color 0.1s ease-out;
}
.course-org-list .course-element-card .summary .course-title {
color: inherit;
Expand All @@ -213,6 +213,7 @@
color: inherit;
}
.course-org-list .course-element-card .summary .multi-column-course-id,
.course-org-list .course-element-card .summary .course-id,
.course-org-list .course-element-card .summary .course-status {
display: none !important;
}
Expand All @@ -230,35 +231,76 @@
margin: 0 !important;
flex: 1;
}
.multi-column-view .course-org-list .course-element-card {
transform: none !important;
transition-duration: 0.1s !important;
transition-timing-function: ease-out !important;
position: relative;
box-shadow: none !important;
}
.multi-column-view .course-org-list .course-element-card .summary {
grid-template-rows: auto !important;
grid-template-columns: 1fr auto !important;
}
.multi-column-view .course-org-list .course-element-card::before {
.course-org-list .course-element-card::after {
all: unset;
content: "";
display: block !important;
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 0.25rem 1rem 0 #1d1b1e !important;
box-shadow: 0 calc(var(--box-shadow) / 4) var(--box-shadow) 0 #1d1b1e !important;
opacity: 0.1;
transition: opacity 0.1s ease-out;
}
.multi-column-view .course-org-list .course-element-card:hover::before {
.course-org-list .course-element-card:hover::after {
opacity: 0.2;
}
.multi-column-view .course-org-list .course-element-card {
transform: none !important;
transition-duration: 0.1s !important;
transition-timing-function: ease-out !important;
position: relative;
box-shadow: none !important;
margin: 0 !important;
}
.multi-column-view .course-org-list .course-element-card .summary {
grid-template-rows: auto !important;
grid-template-columns: 1fr auto !important;
margin-top: -1rem !important;
}
.list-column-view .course-org-list .course-color-classic::before {
background-color: #1d1b1e !important;
}
.list-column-view .course-org-list .course-element-card {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0.5rem !important;
--box-shadow: 0.5rem;
}
.list-column-view .course-org-list .course-element-card .summary {
display: flex;
flex-flow: row-reverse nowrap;
gap: 1rem;
min-height: 0;
}
.list-column-view .course-org-list .course-element-card .summary > .small-12:first-child {
display: none;
}
.list-column-view .course-org-list .course-element-card .course-title {
flex-grow: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.list-column-view .course-org-list .course-element-card .course-type {
color: #1d1b1e;
opacity: 0.5;
}
.list-column-view .course-org-list .course-element-card .course-type:not(:empty)::before {
content: "(";
}
.list-column-view .course-org-list .course-element-card .course-type:not(:empty)::after {
content: ")";
}
.list-column-view .course-org-list .course-element-card .element-details .status-bar {
display: none;
}
.list-column-view .course-org-list .course-element-card .controls {
padding: 0;
margin: 0;
width: auto;
height: auto;
}
#__SVG_SPRITE_NODE__ #icon-small-star-press > path {
fill: #8142a6;
Expand Down
87 changes: 67 additions & 20 deletions styles/_online.manchester.ac.uk_ultra.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ nav.term-navigator {
border: none;
background-color: $surface-1;
color: $on-surface;
margin: 0 !important;
transition: background-color 0.1 ease-out;
transition: background-color 0.1s ease-out;
box-shadow: none !important;

height: auto !important;
min-height: 0;
Expand Down Expand Up @@ -122,10 +122,9 @@ nav.term-navigator {
.summary {
background-color: inherit;
border-radius: inherit;
margin-top: -1rem !important;
min-height: 7.5rem;
z-index: 1;
transition: background-color 0.1 ease-out;
transition: background-color 0.1s ease-out;

.course-title {
color: inherit;
Expand All @@ -137,6 +136,7 @@ nav.term-navigator {
}

.multi-column-course-id,
.course-id,
.course-status {
display: none !important;
}
Expand All @@ -156,6 +156,25 @@ nav.term-navigator {
}
}
}

--box-shadow: 1rem;
&::after {
all: unset;
content: "";
display: block !important;
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 calc(var(--box-shadow) / 4)
var(--box-shadow) 0
$header !important;
opacity: 0.1;
transition: opacity 0.1s ease-out;
}
&:hover::after {
opacity: 0.2;
}
}
}

Expand All @@ -166,34 +185,62 @@ nav.term-navigator {
transition-timing-function: ease-out !important;
position: relative;
box-shadow: none !important;
margin: 0 !important;

.summary {
grid-template-rows: auto !important;
grid-template-columns: 1fr auto !important;
}

&::before {
all: unset;
content: "";
display: block !important;
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 0.25rem 1rem 0 $header !important;
opacity: 0.1;
transition: opacity 0.1s ease-out;
}
&:hover::before {
opacity: 0.2;
margin-top: -1rem !important;
}
}
}

.list-column-view .course-org-list {
.course-color-classic::before {
background-color: $header !important;
}
.course-element-card {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: 0.5rem !important;
--box-shadow: 0.5rem;

.summary {
display: flex;
flex-flow: row-reverse nowrap;
gap: 1rem;
min-height: 0;

> .small-12:first-child {
display: none;
}
}

.course-title {
flex-grow: 1;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.course-type {
color: $on-surface;
opacity: 0.5;
}
.course-type:not(:empty) {
&::before { content: '('; }
&::after { content: ')'; }
}

.element-details .status-bar {
display: none;
}
.controls {
padding: 0;
margin: 0;
width: auto;
height: auto;
}
}
}

Expand Down

0 comments on commit b484536

Please sign in to comment.