yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 04:09:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

changed template mobile, separation his on components header and menu

Browse Source
This commit is contained in:
Kostya
2023-12-14 21:06:51 +03:00
parent 51656e5479
commit e856182e63
6 changed files with 178 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css Normal file
View File

@@ -0,0 +1,64 @@
/* Header */
.header-mobile {
grid-area: header-mobile;
border-radius: 20px;
background: #17181C;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
height: 45%;
}
.header-mobile__content {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-mobile__logo {
padding: 6% 0 2.5% 4%;
}
.header-mobile__logo img {
width: 85%;
}
.header-mobile__balance--content {
display: flex;
align-items: center;
}
.header-mobile__card {
border-radius: 7px;
background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.card-display h2 {
display: flex;
align-items: flex-end;
padding: 8% 15px 8% 7%;
}
.card-img img {
width: 100%;
height: 100%;
}
.card-text {
color: #FFF;
font-weight: 700;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
font-size: 13px;
}
.btn-card img {
width: 90%;
height: 40px;
}
.btn-card__margin {
margin-left: -8%;
}
/* /Header */

46
luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css Normal file
View File

@@ -0,0 +1,46 @@
/* Footer */
.footer-mobile {
grid-area: footer-mobile;
width: 100%;
height: 10%;
background: #17181C;
position: fixed;
bottom: 0;
}
.footer-mobile__content {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2%;
}
.chat-icon a,
.home-icon a,
.settings-icon a {
background: #000;
}
.home-icon a img {
padding-left: 6px;
}
.settings-icon a img {
width: 75px;
height: 75px;
padding: 9px 0 0 6px;
}
.footer-mobile__block a {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 4em;
background: #D9D9D91F;
border-radius: 20px;
margin: 0 .8em;
}
/* /Footer */

112
luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
View File

@@ -16,86 +16,12 @@ body {
width: 100%;
}
.header-mobile {
grid-area: header-mobile;
border-radius: 20px;
background: #17181C;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
height: 45%;
}
.main-mobile {
grid-area: main-mobile;
width: 100%;
height: 100%;
}
.footer-mobile {
grid-area: footer-mobile;
width: 100%;
height: 10%;
background: #17181C;
position: fixed;
bottom: 0;
}
/* Header */
.header-mobile__content {
display: flex;
align-items: center;
justify-content: space-between;
}
.header-mobile__logo {
padding: 6% 0 2.5% 4%;
}
.header-mobile__logo img {
width: 85%;
}
.header-mobile__balance--content {
display: flex;
align-items: center;
}
.header-mobile__card {
border-radius: 7px;
background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.card-display h2 {
display: flex;
align-items: flex-end;
padding: 8% 15px 8% 7%;
}
.card-img img {
width: 100%;
height: 100%;
}
.card-text {
color: #FFF;
font-weight: 700;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
font-size: 13px;
}
.btn-card img {
width: 90%;
height: 40px;
}
.btn-card__margin {
margin-left: -8%;
}
/* /Header */
/* Main */
.main-mobile__content {
@@ -168,41 +94,3 @@ body {
}
/* /Main */
/* Footer */
.footer-mobile__content {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2%;
}
.chat-icon a,
.home-icon a,
.settings-icon a {
background: #000;
}
.home-icon a img {
padding-left: 6px;
}
.settings-icon a img {
width: 75px;
height: 75px;
padding: 9px 0 0 6px;
}
.footer-mobile__block a {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: 4em;
background: #D9D9D91F;
border-radius: 20px;
margin: 0 .8em;
}
/* /Footer */

30
luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<header class="header-mobile">
<div class="header-mobile__content">
<div class="header-mobile__logo">
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
</div>
<div class="header-mobile__balance">
<div class="header-mobile__balance--content">
<div class="header-mobile__card card-display card-text card-img">
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
</div>
<div class="header-mobile__btn--balance btn-card btn-card__margin">
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
</div>
</div>
</div>
</div>
</header>
</template>
<script>
import '@/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css'
export default {
}
</script>
<style scoped>
</style>

32
luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<footer class="footer-mobile">
<div class="footer-mobile__content">
<div class="footer-mobile__block chat-icon">
<a href="#">
<img src="@/assets/icons-adaptive/home-adaptive/icon-chat.svg">
</a>
</div>
<div class="footer-mobile__block home-icon">
<a href="#" @click="$router.push({ name: 'home' })">
<img src="@/assets/icons-adaptive/home-adaptive/icon-home.svg">
</a>
</div>
<div class="footer-mobile__block settings-icon">
<a href="#">
<img width="" src="@/assets/icons-adaptive/home-adaptive/icon-settings.png">
</a>
</div>
</div>
</footer>
</template>
<script>
import '@/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css'
export default {
}
</script>
<style scoped>
</style>

42
luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
View File

@@ -1,23 +1,7 @@
<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
<template>
<div class="content-grid__mobile-home">
<header class="header-mobile">
<div class="header-mobile__content">
<div class="header-mobile__logo">
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
</div>
<div class="header-mobile__balance">
<div class="header-mobile__balance--content">
<div class="header-mobile__card card-display card-text card-img">
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
</div>
<div class="header-mobile__btn--balance btn-card btn-card__margin">
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
</div>
</div>
</div>
</div>
</header>
<header-mobile-component></header-mobile-component>
<main class="main-mobile">
<div class="main-mobile__content">
<div class="main-mobile__first-line">
@@ -38,25 +22,7 @@
</div>
</div>
</main>
<footer class="footer-mobile">
<div class="footer-mobile__content">
<div class="footer-mobile__block chat-icon">
<a href="#">
<img src="@/assets/icons-adaptive/home-adaptive/icon-chat.svg">
</a>
</div>
<div class="footer-mobile__block home-icon">
<a href="#" @click="$router.push({ name: 'home' })">
<img src="@/assets/icons-adaptive/home-adaptive/icon-home.svg">
</a>
</div>
<div class="footer-mobile__block settings-icon">
<a href="#">
<img width="" src="@/assets/icons-adaptive/home-adaptive/icon-settings.png">
</a>
</div>
</div>
</footer>
<menu-mobile-component></menu-mobile-component>
</div>
</template>
@@ -65,7 +31,11 @@ import '@/assets/css/PagesStyles/adaptive-pages/homemobile.css'
import '@/mocks/GameModes'
import GameModes from "@/mocks/GameModes";
import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
export default {
components: { HeaderMobileComponent, MenuMobileComponent },
data() {
return {
GameModes