From 9b999d1b69b2f5da8ec2b456240739344cf9e9a9 Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Mon, 5 Jun 2023 15:23:08 +0200
Subject: [PATCH] mobile for theme
---
.../catalogue/2022/fragment_box.html | 4 +--
.../static/2022/styles/layout/_books.scss | 29 +++++++++++++------
.../static/2022/styles/layout/_theme.scss | 14 +++++++--
3 files changed, 33 insertions(+), 14 deletions(-)
diff --git a/src/catalogue/templates/catalogue/2022/fragment_box.html b/src/catalogue/templates/catalogue/2022/fragment_box.html
index 7371976c3..01bb680e4 100644
--- a/src/catalogue/templates/catalogue/2022/fragment_box.html
+++ b/src/catalogue/templates/catalogue/2022/fragment_box.html
@@ -5,14 +5,14 @@
<img src="{{ fragment.book.cover_clean.url }}" alt="{{ fragment.book.title }}">
{% endif %}
</a>
- </figure>
- <div class="l-books__item__content">
<div class="l-books__item__actions">
<a href="{{ fragment.book.get_absolute_url }}" class="icon icon-book-alt"></a>
{% if fragment.book.has_mp3_file %}
<a href="{{ fragment.book.get_absolute_url }}" class="icon icon-audio"></a>
{% endif %}
</div>
+ </figure>
+ <div class="l-books__item__content">
<h3>
{% for author in fragment.book.authors %}
<a href="{{ author.get_absolute_url }}">{{ author }}</a>{% if not forloop.last %}, {% endif %}
diff --git a/src/wolnelektury/static/2022/styles/layout/_books.scss b/src/wolnelektury/static/2022/styles/layout/_books.scss
index cdffc6430..b59e48fd5 100644
--- a/src/wolnelektury/static/2022/styles/layout/_books.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_books.scss
@@ -238,25 +238,36 @@
margin-top: 34px;
.l-books__item {
- width: 705px;
+ width: calc(100% - 10px);
border: 1px solid #D9D9D9;
margin-bottom: 17px;
display: flex;
+ position: relative;
+ @include rwd($break-flow) {
+ width: 705px;
+ }
.l-books__item__img {
- margin-bottom: 0;
+ margin-bottom: 0;
+ }
+
+ .l-books__item__actions {
+ margin-top: 16px;
+ @include rwd($break-flow) {
+ position: absolute;
+ top: 21px;
+ left: auto;
+ right: 11px;
+ }
}
}
}
.l-books__item__content {
- padding-left: 40px;
- position: relative;
-
- .l-books__item__actions {
- position: absolute;
- right: 0;
- }
+ padding-left: 16px;
+ @include rwd($break-flow) {
+ padding-left: 40px;
+ }
h2 {
font-weight: $semibold;
diff --git a/src/wolnelektury/static/2022/styles/layout/_theme.scss b/src/wolnelektury/static/2022/styles/layout/_theme.scss
index b2bb1be3c..73dbe3f68 100644
--- a/src/wolnelektury/static/2022/styles/layout/_theme.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_theme.scss
@@ -1,5 +1,10 @@
.l-theme {
- display: flex;
+ display: flex;
+ flex-direction: column;
+
+ @include rwd($break-flow) {
+ flex-direction: row;
+ }
}
.l-theme__col {
@@ -12,7 +17,10 @@
border-radius: 10px;
background-color: #E1F1F2;
margin-top: 34px;
- max-width: 415px;
+ @include rwd($break-flow) {
+ max-width: 415px;
+ }
+
h3 {
display: flex;
align-content: center;
@@ -64,4 +72,4 @@
max-width: 100%;
margin-right: 17px;
}
-}
\ No newline at end of file
+}
--
2.20.1