tutor/tutor-deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add html tags in sidebar

Browse Source
This commit is contained in:
Muhammad Labeeb 2025-02-25 19:02:52 +05:00 committed by Régis Behmo
parent 0d6fad1043
commit 1c9a1ce6c3
2 changed files with 87 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
tutordash/server/static/scss/dash.scss
View File

@ -1,9 +1,10 @@
$blue-1: #f5faff; $blue-1: #f5faff;
$gray-1: #e9eaeb; $gray-1: #e9eaeb;
$gray-2: #c4c4c4; $gray-2: #c4c4c4;
$edly-logo-red: #dc1f26; $gray-3: #888;
$dark-gray: #4a4a4a; $gray-4: #535862;
$gray: #535862; $gray-5: #4a4a4a;
$red: #dc1f26;
$light-gray: #888; $light-gray: #888;
$black: #181d27; $black: #181d27;
$blue: #1570ef; $blue: #1570ef;
@ -18,6 +19,23 @@ $green: #009951;
} }
} }
h1 {
font-size: 2.25em;
font-weight: bold;
}
h2 {
font-size: 1.75em;
font-weight: bold;
}
h3 {
font-size: 1.5em;
font-weight: bold;
}
h4 {
font-size: 1em;
font-weight: bold;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -28,81 +46,58 @@ html {
body { body {
margin: 0; margin: 0;
} }
.main-container { main {
display: flex; display: grid;
.sidebar { grid-template-columns: 18.5em auto;
flex: 0 0 19em;
nav {
border-right: 1px solid $gray-2; border-right: 1px solid $gray-2;
box-shadow: 2px 0px $gray-1; box-shadow: 2px 0px $gray-1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 90vh; height: 100%;
.section { header {
flex: 0 0 5.5em;
border-bottom: 1px solid $gray-2;
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: flex-start; img {
height: 100%; margin-left: 1.25em;
.header { width: 2em;
flex: 0 0 6em; height: auto;
border-bottom: 1px solid $gray-2; }
h2 {
color: $red;
margin-left: 0.5em;
}
}
menu {
padding-inline-start: 0.75em;
a {
@include a-tag();
display: flex; display: flex;
align-items: center; align-items: center;
.image { color: $gray-5;
margin-left: 2em; height: 3em;
width: 2em; margin: 0 1em 1em 0;
img { padding-left: 1em;
width: 100%; border-radius: 0.5em;
height: auto; &:hover {
} background-color: $blue-1;
} }
.text { img {
font-size: 2rem; width: 1.25em;
color: $edly-logo-red; }
font-weight: bold; .sidebar-tab-logo-selected {
margin-left: 0.25em; filter: invert(39%) sepia(98%) saturate(3884%)
hue-rotate(205deg) brightness(95%) contrast(96%);
}
h4 {
margin-left: 1em;
} }
} }
.content { .sidebar-tab-selected {
display: flex; color: $blue;
flex-direction: column;
div {
flex: 0 0 8em;
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-top: 1em;
a {
@include a-tag();
list-style: none;
color: $dark-gray;
font-size: 16px;
font-weight: 600;
margin: 0em 1em;
border-radius: 0.5em;
&:hover {
background-color: $blue-1;
}
li {
display: flex;
align-items: center;
padding: 0.5em 1em;
span {
margin-left: 0.5em;
}
.sidebar-tab-logo-selected {
filter: invert(39%) sepia(98%) saturate(3884%)
hue-rotate(205deg) brightness(95%)
contrast(96%);
}
}
.sidebar-tab-selected {
color: $blue;
background-color: $blue-1;
border-radius: inherit;
}
}
}
} }
} }
} }
@ -132,7 +127,7 @@ body {
} }
.page-description { .page-description {
font-size: 1.25em; font-size: 1.25em;
color: $gray; color: $gray-4;
} }
} }
@ -190,7 +185,7 @@ body {
border-radius: 0.5em; border-radius: 0.5em;
align-items: center; align-items: center;
font-size: 1.25em; font-size: 1.25em;
color: $gray; color: $gray-4;
margin-bottom: 1em; margin-bottom: 1em;
padding: 0.5em 1em; padding: 0.5em 1em;
span { span {
@ -229,7 +224,7 @@ body {
} }
.author { .author {
font-size: 1.15em; font-size: 1.15em;
color: $gray; color: $gray-4;
} }
.description { .description {
font-size: 1em; font-size: 1em;
@ -293,7 +288,7 @@ body {
.author { .author {
font-size: 1em; font-size: 1em;
color: $gray; color: $gray-4;
} }
} }
@ -364,7 +359,7 @@ body {
} }
input { input {
border: 1px solid $light-gray; border: 1px solid $gray-3;
border: 1px solid #888; border: 1px solid #888;
padding: 0.75em; padding: 0.75em;
border-radius: 0.5em; border-radius: 0.5em;
@ -496,7 +491,7 @@ body {
} }
p { p {
color: $gray; color: $gray-4;
} }
} }

52
tutordash/server/templates/index.html
View File

@ -19,39 +19,23 @@
</head> </head>
<body> <body>
<div class="main-container"> <main>
<div class="sidebar"> <nav>
<div class="section"> <header>
<div class="header"> <img src="{{ url_for('static', filename='/img/Edly Red Icon.svg') }}"/>
<div class="image"> <h2>Edly</h2>
<img src="{{ url_for('static', filename='/img/Edly Red Icon.svg') }}"/> </header>
</div> <menu>
<div class="text"> <a href="{{ url_for('plugin_store') }}" id="plugin-marketplace">
Edly <img id="plugin-marketplace-logo" src="{{ url_for('static', filename='/img/shopping-bag.svg') }}"/>
</div> <h4>Plugin Marketplace</h4>
</div> </a>
<div class="content"> <a href="{{ url_for('installed_plugins') }}" id="my-plugins">
<div> <img id="my-plugins-logo" src="{{ url_for('static', filename='/img/stack.svg') }}"/>
<a href="{{ url_for('plugin_store') }}"> <h4>My Plugins</h4>
<li id="plugin-marketplace" class="sidebar-tab"> </a>
<img id="plugin-marketplace-logo" class="sidebar-tab-logo" src="{{ url_for('static', filename='/img/shopping-bag.svg') }}" height="20rem"/> </menu>
<span>Plugin Marketplace</span> </nav>
</li>
</a>
<p></p>
<a href="{{ url_for('installed_plugins') }}">
<li id="my-plugins" class="sidebar-tab">
<img id="my-plugins-logo" class="sidebar-tab-logo" src="{{ url_for('static', filename='/img/stack.svg') }}" height="25rem"/>
<span>My Plugins</span>
</li>
</a>
</div>
</div>
<div class="footer">
</div>
</div>
</div>
<div class="workspace"> <div class="workspace">
<div class="header"> <div class="header">
@ -65,7 +49,7 @@
</div> </div>
<div class="void"></div> <div class="void"></div>
</div> </div>
</div> </main>
<div class="modal-container" id="modal_container"> <div class="modal-container" id="modal_container">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">