ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Large screen optimization
Some checks failed
The Quran / ci (push) Has been cancelled
Details

Browse source
This commit is contained in:
0x1eef 2024-10-25 06:04:36 -03:00
parent 5f930a09cf
commit 73c4b87ea8
4 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
share/al-quran.reflectslight.io/CHANGELOG
View file

@ -2,6 +2,12 @@
* vNEXT * vNEXT
** Large screen optimization
On large screens - the content now has a maximum height
of ~$breakpoint-md~, and the content is both vertically
and horiztonally aligned. At 2560x1080 the appearance is
similar to a book on a large blank space
** Revisit ~ThemeSelect.tsx~ for touch devices ** Revisit ~ThemeSelect.tsx~ for touch devices
On touch devices it is now easier to change themes thanks to On touch devices it is now easier to change themes thanks to
a container that has a larger height and width than the theme a container that has a larger height and width than the theme

13
src/css/_base.scss
View file

@ -5,6 +5,19 @@
html { html {
height: 100%; height: 100%;
@media (min-height: $breakpoint-lg) {
body {
display: flex;
justify-content: center;
align-items: center;
}
.app.mount.root {
max-height: $breakpoint-md;
}
}
body { body {
height: 100%; height: 100%;
margin: 0; margin: 0;

2
src/html/main/surah-index.html.erb
View file

@ -21,7 +21,7 @@
</head> </head>
<body> <body>
<%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %> <%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %>
<div class="app mount root h-full"></div> <div class="app mount root w-full h-full"></div>
<script src="/js/loaders/surah-index-loader.js?v=<%= commit %>"></script> <script src="/js/loaders/surah-index-loader.js?v=<%= commit %>"></script>
</body> </body>
</html> </html>

2
src/html/main/surah-stream.html.erb
View file

@ -21,7 +21,7 @@
</head> </head>
<body> <body>
<%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %> <%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %>
<div class="app mount root" <div class="app mount root w-full h-full"
data-surah-id="<%= context.surah.id %>" data-surah-id="<%= context.surah.id %>"
data-audio-base-url="<%= audio_base_url %>" data-audio-base-url="<%= audio_base_url %>"
data-commit-id="<%= commit %>"> data-commit-id="<%= commit %>">