Commit c4fbc76d authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

fix: improvements to CSS responsiveness

parent f0847e5e
Pipeline #35367 passed with stages
in 2 minutes and 15 seconds
......@@ -18,6 +18,11 @@
display: grid;
grid-template-columns: 5fr 1fr;
}
@media (max-width: 1080px) {
.container {
grid-template-columns: 5fr 0fr;
}
}
.container > .left-inner-container {
grid-column: 1;
height: 100%;
......@@ -27,7 +32,13 @@
align-content: flex-start;
padding-right: 10px;
border: solid 1px rgba(0,0,0,0);
border-right: solid 2px rgba(240, 240, 240, 0.7);
border-right: solid 2px rgba(240, 240, 240, 0.7);
}
@media (max-width: 1080px) {
.container > .left-inner-container {
border: none;
padding-right: 0px;
}
}
.full-bleed {
width: 100%;
......@@ -45,6 +56,11 @@
border-radius: 0px 20px 20px 0;
padding-left: 5px;
}
@media (max-width: 1080px) {
.container > .right-inner-container {
display: none;
}
}
.droppable {
background: #eee;
border: solid 1px var(--secondary-color);
......@@ -72,6 +88,14 @@
width: 160px;
min-height: 100px;
}
@media (max-width: 10px) {
.card {
width: 100%;
grid-template-columns: 3fr 5fr;
display: grid;
height: 60px;
}
}
.card.card-dragged {
height: 80px;
}
......@@ -82,6 +106,14 @@
background-color: white;
transition: background-color var(--animation-time) linear, border-style var(--animation-time) linear;
}
@media (max-width: 10px) {
.card > .card-header {
display: grid;
grid-template-rows: 2fr 2fr;
border-radius: var(--border-radius) 0px 0px var(--border-radius);
min-height: 100px;
}
}
.card > .card-header:hover {
border-color: var(--primary-color);
background-color: var(--primary-color);
......@@ -112,6 +144,13 @@
background-color: white;
font-size: 15px;
}
@media (max-width: 10px) {
.card > .card-content {
display: flex;
border-radius: 0 var(--border-radius) var(--border-radius) 0px;
min-height: 100px;
}
}
.card > .card-content.card-dragged {
opacity: 0;
background: rgba(255,255,255,0.0);
......@@ -142,6 +181,14 @@
vertical-align: middle;
font-size: 14pt;
}
@media (max-width: 10px) {
.card > .card-header > .card-title {
border-radius: 0px 0px 0px var(--border-radius);
height: 15px;
padding: 0 0 5px 0;
font-size: unset;
}
}
/* ==================================================== */
/* Pinned cards */
/* ==================================================== */
......@@ -216,6 +263,12 @@ div.search-bar {
margin-left: 20%;
display: flex;
}
@media (max-width: 1080px) {
div.search-bar {
margin-left: 3%;
width: 100%;
}
}
.search-bar > input {
width: 100%;
margin: 0px 0px 40px 0px;
......@@ -252,6 +305,12 @@ div.search-bar {
text-align: center;
cursor: pointer;
}
@media (max-width: 1080px) {
.indicator {
top: 40px;
right: 20px;
}
}
.indicator > i {
font-size: 36px;
}
......@@ -283,4 +342,4 @@ div.search-bar {
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent var(--tooltip-bg);
}
\ No newline at end of file
}
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