Commit 7fadf545 authored by Matt Glorion's avatar Matt Glorion
Browse files

[UPD] results sidebar reorg

parent bc6bfc9c
<template> <template>
<div class="results"> <div class="results">
<div class="results-header"> <div class="results-header">Résultats</div>
Résultats <div class="results-header-btn-actions">
<div class="results-header-btn-actions"> <button
<button
class="results-header-btn-reload" class="results-header-btn-reload"
@click.prevent="updateResults" @click.prevent="updateResults"
> >
Calculer Calculer 🔄
</button> </button>
<button <button
class="results-header-btn-export" class="results-header-btn-export"
@click.prevent="exportResults" @click.prevent="exportResults"
> >
Exporter Exporter ⬇️
</button> </button>
</div>
</div> </div>
<div class="results-content"> <div class="results-content">
<div <div
...@@ -220,36 +218,43 @@ export default { ...@@ -220,36 +218,43 @@ export default {
background-color: #f1f1f1; background-color: #f1f1f1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
height: 100%; height: 100%;
display: flex;
flex-direction: column;
} }
/* /*
* HEADER * 1 - HEADER
*/ */
.results-header { .results-header {
font-weight: bold; flex-basis: 8vh;
font-size: 30px;
line-height: 35px;
color: #3b3b3b; color: #3b3b3b;
padding-top: 16px; font-size: 30px;
font-weight: bold;
padding-top: 20px;
padding-left: 40px; padding-left: 40px;
} }
.results-header-btn-actions button {
/*
* 2 - BUTTONS
*/
.results-header-btn-actions {
flex-basis: 8vh;
width: 100%;
color: blueviolet;
bottom: 0;
padding: 0;
margin: 0;
}
.results-header-btn-actions button{
height: 100%;
width: 50%;
border: none; border: none;
color: black;
border-radius: 6px;
padding: 2px 8px;
margin-left: 5px;
position: relative;
top: -5px;
text-align: center;
text-decoration: none;
display: inline-block;
} }
.results-header button:hover { button:hover {
cursor: pointer; cursor: pointer;
} }
.results-header-btn-export { .results-header-btn-export {
background: rgba(58, 104, 224, 0.5); background: rgba(58, 104, 224, 0.5);
} }
...@@ -263,48 +268,33 @@ export default { ...@@ -263,48 +268,33 @@ export default {
background: rgba(85, 235, 52, 0.8); background: rgba(85, 235, 52, 0.8);
} }
.results-header-btn-displayed-view {
margin-bottom: 10px;
margin-left: 4px;
}
.results-header-btn-displayed-view input {
background-color: #3b3b3b;
max-width: 50%;
border: none;
color: white;
padding: 5px 15px;
float: left;
cursor: pointer;
}
.results-header-btn-displayed-view .active {
background-color: rgba(59, 59, 59, 0.5);
color: white;
font-weight: bold;
padding: 5px 15px;
float: left;
}
/* /*
* RESULTS * 3 - RESULTS
*/ */
.results-content { .results-content {
padding-top: 10px; flex-basis: 100%;
flex-grow: 4;
max-height: 84vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
} }
.results-section { .results-section {
flex-basis: 25%;
border-top-style: solid; border-top-style: solid;
border-color: #bcbcbc; border-color: #bcbcbc;
border-width: 3px; border-width: 3px;
padding-top: 10px; padding-top: 10px;
padding-left: 40px; padding-left: 40px;
} }
.results-section:last-child {
border-bottom-style: solid;
}
.results-section:hover { .results-section:hover {
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
} }
.results-section h3 { .results-section h3 {
color: #3b3b3b; color: #3b3b3b;
font-size: 16px; font-size: 16px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment