Skip to content

Commit

Permalink
refactor: ux improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
selimdoyranli committed Nov 1, 2024
1 parent 3eae191 commit e6ca887
Show file tree
Hide file tree
Showing 26 changed files with 973 additions and 826 deletions.
12 changes: 7 additions & 5 deletions app.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,6 @@
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5310998423283624"
crossorigin="anonymous"
></script>
</head>
<body {{ BODY_ATTRS }}>
<header style="display: none">
Expand All @@ -28,5 +23,12 @@ <h3>kelime oyunu oyna</h3>
<a href="https://www.parolla.app" title="günlük kelime oyunu">günlük kelime oyunu</a>
<strong>günlük bulmaca</strong>
</footer>

<script
type="text/partytown"
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5310998423283624"
crossorigin="anonymous"
></script>
</body>
</html>
67 changes: 64 additions & 3 deletions assets/style/scss/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,73 @@

// > Bootstrap Partials

$utilities: (
'align': null,
'float': null,
'opacity': null,
'overflow': null,
'shadow': null,
'position': null,
'top': null,
'bottom': null,
'start': null,
'end': null,
'translate-middle': null,
'border': null,
'border-top': null,
'border-end': null,
'border-bottom': null,
'border-start': null,
'border-color': null,
'border-width': null,
'border-opacity': null,
'width': null,
'max-width': null,
'viewport-width': null,
'min-viewport-width': null,
'height': null,
'max-height': null,
'viewport-height': null,
'min-viewport-height': null,
'flex': null,
'flex-direction': null,
'flex-grow': null,
'flex-shrink': null,
'flex-wrap': null,
'justify-content': null,
'align-items': null,
'align-content': null,
'align-self': null,
'order': null,
'gap': null,
'font-family': null,
'font-size': null,
'font-style': null,
'font-weight': null,
'line-height': null,
'text-align': null,
'text-decoration': null,
'text-transform': null,
'white-space': null,
'word-wrap': null,
'color': null,
'text-opacity': null,
'background-color': null,
'bg-opacity': null,
'gradient': null,
'user-select': null,
'pointer-events': null,
'rounded': null,
'rounded-top': null,
'rounded-end': null,
'rounded-bottom': null,
'rounded-start': null,
'visibility': null
);

@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/utilities';
@import 'bootstrap/scss/utilities/api';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/containers';

// Base
@import 'base/general';
Expand All @@ -37,6 +99,5 @@
@import 'shared/layout';
@import 'shared/transition';
@import 'shared/scene';
@import 'shared/countdown';
@import 'shared/toast';
@import 'shared/dialog';
1 change: 1 addition & 0 deletions assets/style/scss/base/_general.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ html {
height: 100%;
min-height: 100%;
overflow: hidden !important;
touch-action: manipulation;
}

body {
Expand Down
1 change: 0 additions & 1 deletion assets/style/scss/overrides/bootstrap/_grid.override.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// https://getbootstrap.com/docs/5.0/layout/grid/#variables

$grid-columns: 12;
$grid-gutter-width: 16px;

Expand Down
16 changes: 0 additions & 16 deletions assets/style/scss/shared/_countdown.scss

This file was deleted.

253 changes: 0 additions & 253 deletions assets/style/scss/shared/_dialog.scss
Original file line number Diff line number Diff line change
@@ -1,256 +1,3 @@
.dialog {
// Dialog shared styles
}

// Stats Dialog shared styles
.stats-dialog {
$van-dialog: '.van-dialog';
$stats-dialog: '.stats-dialog';

width: 90% !important;
max-width: var(--tablet) !important;

#{$van-dialog} {
&__content {
padding: var(--base-p-y) calc(var(--base-p-x) * 1.5);
}
}

&-empty {
padding: 0;

&__title {
padding: 0;
text-align: center;
}
}

$van-tabs: '.van-tabs';

#{$van-tabs} {
&__wrap {
height: 36px;
}

&__line {
background-color: var(--color-highlight-01);
}

.van-tab {
&__text {
display: flex;
align-items: center;

#{$stats-dialog} {
&-tab-title {
display: flex;

&__value {
@include media-breakpoint-down(mobile) {
display: none;
}
}
}
}
}

.app-icon {
margin-right: calc(var(--base-m-x) / 4);
}
}
}

.score {
position: relative;

&__count {
@include font-weight-bold;

display: inline-block;
width: 28px;
margin-left: calc(var(--base-m-x) / 2);
}

&__title {
position: relative;
}
}

.scoreboard {
position: relative;
margin-bottom: calc(var(--base-m-y) * 2);

.score {
margin-bottom: var(--base-m-y);

&:last-child {
margin-bottom: 0;
}
}
}

&__actions {
display: flex;
align-items: center;
justify-content: space-between;
}

&__countdown {
$countdown: '.countdown';

flex-wrap: wrap;
margin: unset !important;

#{$countdown} {
&__title {
flex: 100%;
width: 100%;
margin-bottom: calc(var(--base-m-y) / 2);
font-size: var(--font-size-text-7);

@include media-breakpoint-down(mobile) {
font-size: var(--font-size-text-9);
}
}

&__timer {
color: var(--color-text-02);

@include font-weight-bold;

@include media-breakpoint-down(mobile) {
font-size: var(--font-size-text-8) !important;
}
}
}
}

.answers {
position: relative;
max-height: 40vh;
padding: var(--base-p-y) 0;
overflow: auto;

&__inner {
position: relative;
}
}

.answer {
$answer: '.answer';
$van-cell: '.van-cell';
$van-collapse-item: '.van-collapse-item';

padding: calc(var(--base-p-y) / 2) 0;
padding-right: var(--base-p-x);

&::after {
right: 0;
left: 0;
}

&--correct {
#{$van-cell} {
&__title {
color: var(--color-success-01);

&::before {
content: '✔️';
}
}
}

#{$answer} {
&__myAnswer {
span {
color: var(--color-success-01);
}
}
}
}

&--wrong {
#{$van-cell} {
&__title {
color: var(--color-danger-01);

&::before {
content: '';
}
}
}

#{$answer} {
&__myAnswer {
span {
color: var(--color-danger-01);
}
}
}
}

&--passed {
#{$van-cell} {
&__title {
color: var(--color-warning-01);

&::before {
position: relative;
top: calc(var(--base-m-y) / 4);
display: inline-block;
width: 16px;
height: 16px;
margin-right: calc(var(--base-m-x) / 2) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' class='iconify iconify--twemoji' width='32' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 36 36'%3E%3Cpath fill='%23d3af38' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M7 14h9V7l13 11l-13 11v-7H7z'%3E%3C/path%3E%3C/svg%3E");
background-size: contain;
content: '';
}
}
}

#{$answer} {
&__myAnswer {
span {
color: var(--color-warning-01);
}
}
}
}

#{$van-cell} {
padding: calc(var(--base-p-y) / 4) 0;

&:active {
background-color: transparent;
}

&.van-collapse-item__title--expanded {
&::after {
visibility: hidden;
}
}

&__title {
text-transform: uppercase;

&::before {
margin-right: calc(var(--base-m-x) / 4);
}
}
}

#{$van-collapse-item} {
&__content {
padding: 0;
}
}
}

// Footer
&__footer {
margin-top: calc(var(--base-m-y) * 2);
padding: var(--base-p-y) var(--base-p-x);
background-color: var(--color-ui-01);
border-radius: var(--border-radius-01);
}
}
Loading

0 comments on commit e6ca887

Please sign in to comment.