mam
/
mamweb
11
0
Fork 0
Code Issues Pull Requests 9 Projects Releases Wiki Activity
Browse Source

Doplnění nepovinného nesting selektoru &, abychom rozšířili support na starší prohlížeče

odstrel_modelu_odevzdavatko
Jonas Havelka 4 weeks ago
parent
46a8f136fa
commit
ce83247fe0
3 changed files with 71 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      mamweb/static/css/layout.css
  2. 43
      mamweb/static/css/modules.css
  3. 12
      mamweb/templates/base.html

88
mamweb/static/css/layout.css
View File

@ -19,10 +19,10 @@ div.kontejner {/* Ne container, aby se to netlouklo s bootstrapem. */
margin-top: var(--login-bar-height); margin-top: var(--login-bar-height);
} }
div.kontent-wrapper { & div.kontent-wrapper {
padding-bottom: var(--footer-height); padding-bottom: var(--footer-height);
div.kontent { & div.kontent {
padding: 15px 30px; padding: 15px 30px;
} }
} }
@ -67,16 +67,16 @@ div.kontejner {/* Ne container, aby se to netlouklo s bootstrapem. */
background-size: 100%; background-size: 100%;
top: 58px; top: 58px;
img.logo { & img.logo {
width: 100%; width: 100%;
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
} }
img.logo-mobile { & img.logo-mobile {
display: none; display: none;
} }
.no-mobile { & .no-mobile {
background-size: contain; background-size: contain;
} }
} }
@ -94,12 +94,12 @@ div.kontejner {/* Ne container, aby se to netlouklo s bootstrapem. */
filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4)); filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4));
padding-top: 3.5%; padding-top: 3.5%;
p.license { & p.license {
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
bottom: 0; bottom: 0;
a { & a {
color: #333; color: #333;
} }
} }
@ -139,21 +139,21 @@ div.login-bar {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
div { & div {
display: inline; display: inline;
} }
a.LOGIN-ref-admin { & a.LOGIN-ref-admin {
display: inline; display: inline;
color: var(--barva-pozadi); color: var(--barva-pozadi);
} }
.LOGIN_napis-webarum { & .LOGIN_napis-webarum {
display: inline; display: inline;
color: var(--barva-pozadi); color: var(--barva-pozadi);
float: right; float: right;
a { & a {
color: var(--svetla-oranzova); color: var(--svetla-oranzova);
text-decoration: underline; text-decoration: underline;
} }
@ -176,7 +176,7 @@ div.login-bar {
#header { #header {
background-size: 100%; background-size: 100%;
img.logo { & img.logo {
width: 100%; width: 100%;
} }
} }
@ -202,11 +202,11 @@ div.login-bar {
top: 0; top: 0;
background-image: none; background-image: none;
img.logo { & img.logo {
display: none; display: none;
} }
img.logo-mobile { & img.logo-mobile {
display: block; display: block;
top: 0; top: 0;
left: 0; left: 0;
@ -215,7 +215,7 @@ div.login-bar {
margin-bottom: 3px; margin-bottom: 3px;
} }
.no-mobile{ & .no-mobile{
display: none; display: none;
} }
} }
@ -241,13 +241,13 @@ ul.menu {
font-variant: small-caps; font-variant: small-caps;
a { & a {
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-size: 105%; font-size: 105%;
} }
li { & li {
margin: 0; margin: 0;
display: inline-block; display: inline-block;
width: 16.666667%; width: 16.666667%;
@ -256,7 +256,7 @@ ul.menu {
font-size: 140%; font-size: 140%;
font-weight: 400; font-weight: 400;
>a:hover, >a:active { &>a:hover, &>a:active {
color: black; color: black;
} }
@ -265,7 +265,7 @@ ul.menu {
} }
} }
ul.submenu { & ul.submenu {
background-color: var(--hlavni-oranzova); background-color: var(--hlavni-oranzova);
margin-top: 10px; /* mezera mezi hlavním menu a submenu */ margin-top: 10px; /* mezera mezi hlavním menu a submenu */
@ -277,24 +277,24 @@ ul.menu {
z-index: 50; z-index: 50;
font-weight: 400; font-weight: 400;
li { & li {
width: auto; width: auto;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
display: inline-block; display: inline-block;
>a { &>a {
color: var(--svetla-oranzova); color: var(--svetla-oranzova);
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
:hover { &:hover {
color: black; color: black;
} }
} }
} }
} }
ul.submenu li.active>a, .parentactive ul li:first-child>a { & ul.submenu li.active>a, & .parentactive ul li:first-child>a {
color: black; color: black;
} }
} }
@ -304,7 +304,7 @@ ul.menu {
font-size: 90%; font-size: 90%;
margin-top: -7px; margin-top: -7px;
li { & li {
margin-top: 10px; /* posunutí textu hlavního menu níže */ margin-top: 10px; /* posunutí textu hlavního menu níže */
} }
} }
@ -312,7 +312,7 @@ ul.menu {
ul.submenu { ul.submenu {
margin-top: 8px; /* mezera mezi hlavním menu a submenu */ margin-top: 8px; /* mezera mezi hlavním menu a submenu */
li { & li {
margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
} }
} }
@ -323,7 +323,7 @@ ul.menu {
font-size: 80%; font-size: 80%;
margin-top: -2px; margin-top: -2px;
li { & li {
margin-top: 10px; /* posunutí textu hlavního menu níže */ margin-top: 10px; /* posunutí textu hlavního menu níže */
} }
} }
@ -331,7 +331,7 @@ ul.menu {
ul.submenu { ul.submenu {
margin-top: 8px; /* mezera mezi hlavním menu a submenu */ margin-top: 8px; /* mezera mezi hlavním menu a submenu */
li { & li {
margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */ margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
} }
} }
@ -354,20 +354,20 @@ ul.menu {
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 12px; padding-left: 12px;
a { & a {
&:active, &:hover, &:focus { &:active, &:hover, &:focus {
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
} }
ul { & ul {
list-style-type: none; list-style-type: none;
font-size: 90%; font-size: 90%;
color: black; /*černé šipky submenu*/ color: black; /*černé šipky submenu*/
li { & li {
> a { &>a {
color: black; color: black;
} }
@ -377,7 +377,7 @@ ul.menu {
} }
} }
br { & br {
display: none; display: none;
} }
} }
@ -459,13 +459,13 @@ body.suprodweb { &:before, &:after { background: red; } }
display: block; display: block;
} }
h1 { text-align: center; } & h1 { text-align: center; }
.TITULNI_STRANA_zjistit_vic{ & .TITULNI_STRANA_zjistit_vic{
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
hr { & hr {
display: none; display: none;
@media(max-width: 800px){ @media(max-width: 800px){
@ -474,15 +474,15 @@ body.suprodweb { &:before, &:after { background: red; } }
} }
} }
.TITULNI_STRANA_graf { & .TITULNI_STRANA_graf {
@media(max-width: 800px) { @media(max-width: 800px) {
padding-top: 40px; padding-top: 40px;
} }
.TITULNI_STRANA_graf-svg { & .TITULNI_STRANA_graf-svg {
display: flex; display: flex;
#svg-graf { & #svg-graf {
width: 100%; width: 100%;
height: auto; height: auto;
margin: 30px; margin: 30px;
@ -496,7 +496,7 @@ body.suprodweb { &:before, &:after { background: red; } }
} }
} }
.TITULNI_STRANA_obsah { & .TITULNI_STRANA_obsah {
width: 66%; width: 66%;
@media(max-width: 800px){ @media(max-width: 800px){
@ -504,7 +504,7 @@ body.suprodweb { &:before, &:after { background: red; } }
} }
} }
.TITULNI_STRANA_vitej_titulka, .TITULNI_STRANA_temata_titulka { & .TITULNI_STRANA_vitej_titulka, & .TITULNI_STRANA_temata_titulka {
width: 49%; width: 49%;
padding: 10px; padding: 10px;
display: table-cell; display: table-cell;
@ -515,7 +515,7 @@ body.suprodweb { &:before, &:after { background: red; } }
} }
} }
.TITULNI_STRANA_novinky { & .TITULNI_STRANA_novinky {
width: 33%; width: 33%;
padding: 10px; padding: 10px;
@ -540,11 +540,11 @@ div.odpocet {
.stranka_aktualni_zadani { .stranka_aktualni_zadani {
text-align: center; text-align: center;
#AKTUALNI_ZADADNI_obrazek { & #AKTUALNI_ZADADNI_obrazek {
margin-top: 15px; margin-top: 15px;
} }
div.AKTUALNI_ZADANI_termin { & div.AKTUALNI_ZADANI_termin {
text-align: center; text-align: center;
font-size: large; font-size: large;
font-weight: bold; font-weight: bold;
@ -553,7 +553,7 @@ div.odpocet {
font-size: small; font-size: small;
} }
.AKTUALNI_ZADANI_datum { & .AKTUALNI_ZADANI_datum {
color: var(--hlavni-oranzova); color: var(--hlavni-oranzova);
margin: 0; margin: 0;
} }

43
mamweb/static/css/modules.css
View File

@ -20,7 +20,7 @@
border: 0; border: 0;
} }
&li { & li {
padding: 3px 0; padding: 3px 0;
margin: -2px 0; margin: -2px 0;
} }
@ -57,7 +57,7 @@
margin-right: auto; margin-right: auto;
/* This container is needed to position the front and back side */ /* This container is needed to position the front and back side */
.flip-card-inner { & .flip-card-inner {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -71,7 +71,7 @@
} }
/* Position the front and back side */ /* Position the front and back side */
.flip-card-front, .flip-card-back { & .flip-card-front, & .flip-card-back {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -79,18 +79,18 @@
backface-visibility: hidden; backface-visibility: hidden;
} }
div.flip-card-foto, div.flip-card-foto img { & div.flip-card-foto, & div.flip-card-foto img {
width: 100%; width: 100%;
height: 100%; height: 100%;
/* Pokud je na přední straně něco proklikávacího (třeba celá fotka), tak na dotykových zařízeních nemůže proklikávat, aby se dalo otáčet */ /* Pokud je na přední straně něco proklikávacího (třeba celá fotka), tak na dotykových zařízeních nemůže proklikávat, aby se dalo otáčet */
@media(hover: none) { @media(hover: none) {
a { pointer-events: none; } & a { pointer-events: none; }
} }
} }
/* Style the back side */ /* Style the back side */
.flip-card-back { & .flip-card-back {
transform: rotateY(180deg); transform: rotateY(180deg);
padding: 10px; padding: 10px;
padding-top: 20px; padding-top: 20px;
@ -203,7 +203,7 @@ div.org_email {
.tabulka_oramovane_sloupce { .tabulka_oramovane_sloupce {
border: solid 2px; border: solid 2px;
td, th { & td, & th {
&:first-child, &:first-child { &:first-child, &:first-child {
border-left: none; border-left: none;
border-right: solid 1px; border-right: solid 1px;
@ -217,7 +217,7 @@ div.org_email {
border-left: solid 1px; border-left: solid 1px;
} }
thead { th, td { & thead { & th, & td {
border-bottom: solid 1px; border-bottom: solid 1px;
} } } }
} }
@ -228,15 +228,15 @@ div.org_email {
/* Skoro jakákoliv tabulka kromě výsledkovek */ /* Skoro jakákoliv tabulka kromě výsledkovek */
.barevna_tabulka { .barevna_tabulka {
td th { & td th {
padding: 1px 10px 1px 10px; padding: 1px 10px 1px 10px;
} }
tbody tr:nth-child(even), thead tr { & tbody tr:nth-child(even), & thead tr {
background: var(--svetlounka-oranzova); background: var(--svetlounka-oranzova);
} }
tbody tr:nth-child(odd) { & tbody tr:nth-child(odd) {
background: var(--barva-pozadi); background: var(--barva-pozadi);
} }
} }
@ -258,14 +258,14 @@ div.org_email {
border-spacing: 0; border-spacing: 0;
/* Uchytí první řádek */ /* Uchytí první řádek */
thead tr { & thead tr {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
} }
/* Uchytí první sloupec */ /* Uchytí první sloupec */
td, th { &:first-child { & td, & th { &:first-child {
position: sticky; position: sticky;
left: 0; left: 0;
background: inherit; /* (Snad) zneprůhlední první sloupec */ background: inherit; /* (Snad) zneprůhlední první sloupec */
@ -290,7 +290,7 @@ div.org_email {
.plne_ohranicena_tabulka { .plne_ohranicena_tabulka {
border-collapse: collapse; border-collapse: collapse;
tr { th, td { & tr { & th, & td {
border: 1px solid black; border: 1px solid black;
padding: 1px 10px 1px 10px; padding: 1px 10px 1px 10px;
} } } }
@ -305,7 +305,7 @@ div.org_email {
/** Výsledkovky **/ /** Výsledkovky **/
.vysledkovka, .tabulka_oramovane_sloupce { .vysledkovka, .tabulka_oramovane_sloupce {
td, th { & td, & th {
&:first-child { position: unset; } &:first-child { position: unset; }
&:nth-child(2) { &:nth-child(2) {
@ -327,11 +327,11 @@ div.org_email {
/** Tabulka mých (řešitelových) řešení **/ /** Tabulka mých (řešitelových) řešení **/
.moje_reseni tr { .moje_reseni tr {
th, td { & th, & td {
text-align: center; text-align: center;
} }
td.problem { text-align: left; } & td.problem { text-align: left; }
} }
/* Různá šířka problému */ /* Různá šířka problému */
@ -378,16 +378,16 @@ div.org_email {
.novinka { .novinka {
.novinka_obrazek { & .novinka_obrazek {
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
width: 100%; width: 100%;
} }
.novinka_datum { & .novinka_datum {
font-weight: bold; font-weight: bold;
} }
.novinka_autor { & .novinka_autor {
text-align: right; text-align: right;
font-style: italic; font-style: italic;
} }
@ -413,7 +413,6 @@ table#reseni.form td, table#reseni.form tr {
} }
@media(max-width: 800px) { @media(max-width: 800px) {
table#reseni.form td, table#reseni.form tr { table#reseni.form td, table#reseni.form tr {
display: inline-grid; display: inline-grid;
max-width: 300px; max-width: 300px;
@ -473,7 +472,7 @@ ul.form li{
div.gdpr { div.gdpr {
font-size: 6pt; font-size: 6pt;
p { & p {
font-size: 6pt; font-size: 6pt;
margin-bottom: .66em; margin-bottom: .66em;
} }

12
mamweb/templates/base.html
View File

@ -8,12 +8,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{% static 'images/MATFYZ_MM_barevne.svg' %}" type="image/x-icon"> <link rel="shortcut icon" href="{% static 'images/MATFYZ_MM_barevne.svg' %}" type="image/x-icon">
{% block custom_css %}{% endblock %} {% block custom_css %}{% endblock %}
<link href="{% static 'bootstrap/css/bootstrap.css' %}?version=2" rel="stylesheet"> <link href="{% static 'bootstrap/css/bootstrap.css' %}?version=3" rel="stylesheet">
<link href="{% static 'css/constants.css' %}?version=2" rel="stylesheet"> <link href="{% static 'css/constants.css' %}?version=3" rel="stylesheet">
<link href="{% static 'css/mamweb_legacy.css' %}?version=2" rel="stylesheet"> <link href="{% static 'css/mamweb_legacy.css' %}?version=3" rel="stylesheet">
<link href="{% static 'css/base.css' %}?version=2" rel="stylesheet"> <link href="{% static 'css/base.css' %}?version=3" rel="stylesheet">
<link href="{% static 'css/layout.css' %}?version=2" rel="stylesheet"> <link href="{% static 'css/layout.css' %}?version=3" rel="stylesheet">
<link href="{% static 'css/modules.css' %}?version=2" rel="stylesheet"> <link href="{% static 'css/modules.css' %}?version=3" rel="stylesheet">
<script src="{% static 'js/jquery-1.11.1.js' %}"></script> <script src="{% static 'js/jquery-1.11.1.js' %}"></script>
<script src="{% static 'js/jquery-3.4.1.js' %}"></script> <script src="{% static 'js/jquery-3.4.1.js' %}"></script>

Write Preview
Loading…
Cancel
Save