mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-13 05:19:26 +00:00
rework of the main navbar
This commit is contained in:
BIN
core/static/core/img/logo_no_text.png
Normal file
BIN
core/static/core/img/logo_no_text.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 123 KiB |
@ -1,5 +1,3 @@
|
||||
console.log('Guy');
|
||||
|
||||
$( function() {
|
||||
buttons = $(".choose_file_button");
|
||||
popups = $(".choose_file_widget");
|
||||
|
400
core/static/core/navbar.scss
Normal file
400
core/static/core/navbar.scss
Normal file
@ -0,0 +1,400 @@
|
||||
.header {
|
||||
box-sizing: border-box;
|
||||
background-color: #354a5f;
|
||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 580px) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 607px) {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-picture {
|
||||
height: 100%;
|
||||
width: 65px;
|
||||
display: flex;
|
||||
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 1.43em;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-lang {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
> form {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
> input[type=submit] {
|
||||
border-radius: 0;
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #354a5f;
|
||||
width: 45px;
|
||||
height: 25px;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #283747;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-disconnected {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 607px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> .button {
|
||||
box-sizing: border-box;
|
||||
height: 35px;
|
||||
background-color: transparent;
|
||||
font-weight: normal;
|
||||
padding: 5px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: .9em;
|
||||
width: 120px;
|
||||
|
||||
&:hover {
|
||||
background-color: #283747;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-disconnected ~ &-lang {
|
||||
@media (max-width: 662px) {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-connected {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@media (min-width: 400px) and (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
min-width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
> .right,
|
||||
> .left {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 400px) and (max-width: 1200px) {
|
||||
width: 100%;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .options,
|
||||
> .name {
|
||||
> a {
|
||||
color: white;
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .name {
|
||||
color: white;
|
||||
max-width: 250px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
> .options {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: flex-end;
|
||||
|
||||
> a {
|
||||
&:last-child {
|
||||
color: #eb2f06;
|
||||
|
||||
&:hover {
|
||||
color: #cc2804;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .notification {
|
||||
height: 100%;
|
||||
width: 55px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
color: white;
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 5px;
|
||||
background-color: #eb2f06;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
> #header_notif {
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
background-color: whitesmoke;
|
||||
top: calc(100% + 10px);
|
||||
right: calc(50% - 30px);
|
||||
width: 400px;
|
||||
max-width: calc(100vw - 30px);
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
border-radius: 10px;
|
||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||
|
||||
> ul {
|
||||
list-style-type: none;
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 120px;
|
||||
overflow-y: scroll;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
.datetime {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> a {
|
||||
color: black;
|
||||
padding: 5px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .left {
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
> form {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> input[type=text] {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: .9em;
|
||||
margin: 0;
|
||||
background-color: #283747;
|
||||
padding: 0 10px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-connected ~ &-lang {
|
||||
@media (max-width: 1200px) {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bars {
|
||||
list-style-type: none;
|
||||
min-width: 120px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media(max-width: 1200px) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
> li > a {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user