mam/mamweb
13
1
Fork 0
Code Issues Pull requests 12 Projects Wiki Activity Actions

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

Browse source
This commit is contained in:
Jonas Havelka 2024-10-28 12:29:08 +01:00
parent 46a8f136fa
commit ce83247fe0
3 changed files with 71 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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>