Misc UI / layout improvements
The Arabic layout is especially improved. The CSS still needs work, I think the most tech debt is probably within the css.
This commit is contained in:
parent
47738b2937
commit
adac9912b0
7 changed files with 72 additions and 95 deletions
|
|
@ -1,6 +1,10 @@
|
|||
$black: #454545;
|
||||
$max-width: 1024px;
|
||||
|
||||
* {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
html[lang="en"] {
|
||||
font-family: "Kanit Regular";
|
||||
}
|
||||
|
|
@ -27,6 +31,7 @@ body .root .content.theme {
|
|||
margin: 0 auto;
|
||||
height: 100%;
|
||||
width: 85%;
|
||||
height: 80%;
|
||||
max-width: $max-width;
|
||||
|
||||
header {
|
||||
|
|
@ -37,7 +42,7 @@ body .root .content.theme {
|
|||
flex-direction: column;
|
||||
font-size: xx-large;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
height: 75px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -50,6 +55,7 @@ body .root .content.theme {
|
|||
}
|
||||
|
||||
nav {
|
||||
height: 40px;
|
||||
.react-select {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -59,12 +65,11 @@ body .root .content.theme {
|
|||
justify-content: flex-end;
|
||||
}
|
||||
.react-select.language {
|
||||
justify-content: flex-start;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
ul {
|
||||
position:relative;
|
||||
top: 15px;
|
||||
right: 82px;
|
||||
li {
|
||||
align-items: center;
|
||||
font-family: "Kanit Regular";
|
||||
|
|
@ -95,8 +100,8 @@ body .root .content.theme {
|
|||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
height: 73%;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -132,21 +137,14 @@ body .root .content.en {
|
|||
}
|
||||
}
|
||||
|
||||
body .root .content.ar {
|
||||
body .root .content.theme.ar {
|
||||
header {
|
||||
nav, div {
|
||||
direction: ltr;
|
||||
.localized-name {
|
||||
display: flex;
|
||||
font-size: x-large;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
.transliterated-name {
|
||||
display: none;
|
||||
}
|
||||
.react-select.language {
|
||||
ul {
|
||||
top: 15px;
|
||||
}
|
||||
.selected-option.ar {
|
||||
font-size: x-large;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -101,10 +101,7 @@
|
|||
ul.stream span.title {
|
||||
.sound-on.icon, .sound-off.icon {
|
||||
height: 40px;
|
||||
transform: rotate(180deg);
|
||||
g {
|
||||
transform: translate(0px, -28px);
|
||||
}
|
||||
transform: rotate(180deg) translate(0, 3px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
}
|
||||
|
||||
.react-select.language {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
.selected-option.ar {
|
||||
font-size: large;
|
||||
|
|
@ -103,9 +104,6 @@
|
|||
|
||||
.content.theme.ar {
|
||||
.react-select.language {
|
||||
.selected-option {
|
||||
line-height: 0;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
|
||||
body .root .content.theme {
|
||||
header {
|
||||
height: 115px;
|
||||
.react-select.language {
|
||||
ul li {
|
||||
border-radius: 15px;
|
||||
|
|
@ -17,47 +16,30 @@ body .root .content.theme {
|
|||
li.surah a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 10px;
|
||||
min-height: 45px;
|
||||
width: 98%;
|
||||
|
||||
&:visited, &:active, &:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 32px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span.id {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
span.name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
span.id {
|
||||
width: 45px;
|
||||
font-weight: bolder;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.transliterated {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
span.name {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
span.transliterated {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
padding: 0 10px 0 0;
|
||||
@media screen and (max-width: $max-width) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -90,27 +72,20 @@ body .root .content.theme.ar {
|
|||
|
||||
ul.body.index {
|
||||
li.surah {
|
||||
min-height: 55px;
|
||||
a {
|
||||
align-items: unset;
|
||||
div:first-child {
|
||||
.id {
|
||||
font-size: x-large;
|
||||
font-family: "Kanit Regular";
|
||||
width: 55px;
|
||||
height: 47px;
|
||||
}
|
||||
.name {
|
||||
font-size: x-large;
|
||||
}
|
||||
font-family: "Mada Regular";
|
||||
span.id {
|
||||
font-size: x-large;
|
||||
}
|
||||
.transliterated { display: none; }
|
||||
span.name {
|
||||
font-size: x-large;
|
||||
}
|
||||
span.transliterated { display: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 40px;
|
||||
font-family: "Mada Regular";
|
||||
a span {
|
||||
padding: 0 7px 0 0;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,14 @@
|
|||
@import "components/Icon";
|
||||
@import "components/Scrollbar";
|
||||
|
||||
.root .content.theme {
|
||||
body .root .content.theme {
|
||||
height: 75%;
|
||||
|
||||
ul.body.stream {
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
li.ayah {
|
||||
padding: 10px 0 10px 0;
|
||||
span.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -57,27 +60,38 @@
|
|||
height: 30px;
|
||||
}
|
||||
}
|
||||
ul.body.stream {
|
||||
li { padding: 10px 0 0 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.content.theme.ar {
|
||||
header { }
|
||||
body .root .content.theme.ar {
|
||||
header {
|
||||
nav, div {
|
||||
.localized-name {
|
||||
display: flex;
|
||||
font-size: x-large;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
}
|
||||
.transliterated-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.body.stream {
|
||||
li.ayah:first-child {
|
||||
span.title {
|
||||
padding: 15px 0 20px 0;
|
||||
}
|
||||
padding: 35px 0 10px 0;
|
||||
}
|
||||
li.ayah {
|
||||
padding: 20px 0 10px 0;
|
||||
span.title {
|
||||
font-size: x-large;
|
||||
font-size: larger;
|
||||
height: 0;
|
||||
padding: 35px 0 20px 0;
|
||||
font-family: "Mada Regular";
|
||||
}
|
||||
p {
|
||||
line-height: 3;
|
||||
font-size: x-large;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
.id {
|
||||
color: $gold1;
|
||||
}
|
||||
span.id {
|
||||
color: $gold1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,10 +45,10 @@
|
|||
@import "themes/blue/colors";
|
||||
ul.body.index {
|
||||
li.surah a {
|
||||
div:first-child .id {
|
||||
span.id {
|
||||
color: $gold1;
|
||||
}
|
||||
div:first-child .name {
|
||||
span.name {
|
||||
color: $blue1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,14 +44,11 @@ function SurahIndex({ locale, surahs, t }: Props) {
|
|||
{surahs.map((surah, key) => (
|
||||
<li className="surah" key={key}>
|
||||
<a href={`/${locale}/${surah.slug}/`}>
|
||||
<div>
|
||||
<span className="id">{formatNumber(surah.id, locale)}</span>
|
||||
<span className="name">{surah.localizedName}</span>
|
||||
</div>
|
||||
|
||||
<div className="transliterated" lang="en">
|
||||
<span className="id">{formatNumber(surah.id, locale)}</span>
|
||||
<span className="name">{surah.localizedName}</span>
|
||||
<span className="transliterated" lang="en">
|
||||
{surah.transliteratedName}
|
||||
</div>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in a new issue