alireza_hassani
/
willaengine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: image-select

Browse Source
pull/15/head
Alireza Hassani 4 years ago
parent ba9e21a990
commit a85cf0fa8d
17 changed files with 50 additions and 54 deletions
Show Stats Download Patch File Download Diff File

BIN
public/fonts/fontello.eot
View File

Binary file not shown.

2
public/fonts/fontello.svg
Unescape View File

@ -464,6 +464,8 @@
<glyph glyph-name="emo-tongue" unicode="&#xe8e4;" d="M174 800c-61 0-110-65-110-144 0-80 49-145 110-145s110 65 110 145c0 79-49 144-110 144z m476 0c-60 0-109-65-109-144 0-80 49-145 109-145 61 0 110 65 110 145 0 79-49 144-110 144z m121-560l-718-1c-29 0-53-24-53-53 0-30 24-54 53-54l140 0 0-74c0-55 20-108 60-148 46-47 103-60 165-60 57 0 111 17 153 59 41 41 60 94 60 150l0 74 140 0c29 0 53 24 53 53 0 30-24 54-53 54z m-471-109l224 0 0-72c0-27-7-53-28-74-39-39-129-39-168 0-20 21-28 45-28 73l0 73z" horiz-adv-x="824" />
<glyph glyph-name="theme" unicode="&#xe8e5;" d="M718 200c8 0 13 4 13 12l37 78-107 54-33-78c-4-4-4-13 0-17l12-12c21-8 37-17 53-33 5-4 9-4 13-4 8-4 8-4 12 0z m95 49c-8 4-21-4-25-12l-45-99c0-4-4-8 0-12 12-62-21-128-54-165-33-33-90-53-152-53-58 0-107 20-140 53-4 4-16 17-20 33-5-4-9-12-17-12h-206c-12 0-20 8-20 20v288c0 13 8 21 20 21h206c12 0 21-8 21-21v-263c8 16 20 29 37 33 4 0 4 0 8 4 4 4 12 8 21 17 4 4 4 8 4 12s0 4 4 8c4 8 4 17 8 29v4c0 4 0 8 0 12v140c0 13 8 21 21 21h127l17 41h-478c-12 0-20 8-20 21v164c0 13 8 21 20 21h552c4 0 8 0 8-4l41 94c4 4 0 13 0 21-4 4-8 8-16 8h-9-617c-58 0-103-45-103-103v-617c0-58 45-103 103-103h617c58 0 103 45 103 103v263c0 21-8 29-16 33z m-288-82c-25-25-33-49-37-70-4-16-9-29-21-41-25-25-37-29-37-29-8-4-12-8-12-16 0-9 0-13 4-21 29-29 66-41 111-41 49 0 99 16 123 41 42 41 66 128 21 173-41 45-107 45-152 4z m399 683c-29 0-54-16-66-41l-181-428 107-54 202 424c4 9 8 21 8 33 0 37-33 66-70 66z" horiz-adv-x="1000" />
<glyph glyph-name="th-list" unicode="&#xf00b;" d="M292 428v-156c0-26-21-47-47-47h-198c-26 0-47 21-47 47v156c0 26 21 47 47 47h198c26 0 47-21 47-47z m-292-312c0 26 21 47 47 47h198c26 0 47-21 47-47v-157c0-26-21-47-47-47h-198c-26 0-47 21-47 47v157z m245 672c26 0 47-21 47-47v-157c0-25-21-46-47-46h-198c-26 0-47 21-47 46v157c0 26 21 47 47 47h198z m156-876c-26 0-47 21-47 47v157c0 26 21 47 47 47h552c26 0 47-21 47-47v-157c0-26-21-47-47-47h-552z m-47 829c0 26 21 47 47 47h552c26 0 47-21 47-47v-157c0-25-21-46-47-46h-552c-26 0-47 21-47 46v157z m47-516c-26 0-47 21-47 47v156c0 26 21 47 47 47h552c26 0 47-21 47-47v-156c0-26-21-47-47-47h-552z" horiz-adv-x="1000" />
<glyph glyph-name="pause" unicode="&#xf00e;" d="M0 5q0-27 19-46t45-19h127q27 0 45 19t19 46v691q0 27-19 45t-45 19h-127q-27 0-45-19t-19-45v-691z m480 0q0-27 19-46t45-19h127q26 0 45 19t19 46v691q0 27-19 45t-45 19h-127q-27 0-45-19t-19-45v-691z" horiz-adv-x="735.4" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 243 KiB

BIN
public/fonts/fontello.ttf
View File

Binary file not shown.

BIN
public/fonts/fontello.woff
View File

Binary file not shown.

BIN
public/fonts/fontello.woff2
View File

Binary file not shown.

30
resources/js/Global/components/Inputs/ImageSelect.vue
Unescape View File

@ -1,15 +1,15 @@
<template>
<v-row>
<v-col class="image-select" :class="size" size="xl12 hidden-sm-and-down">
<div class="item" v-for="item in items">
<img class="thumbnail" style="width:100%;" :src="`/images/Global/Flags/${item.src}.png`"/>
<v-col v-for="item in items" class="image-select" :class="`${size} hidden-sm-and-down pa-1`">
<div class="item">
<img class="thumbnail width-full" :src="`/images/Global/Flags/${item.src}.png`"/>
<div class="name">
<div class="content">
<div class="Fa"> {{ item.name }} </div>
<div class="En"> {{ item.name_en }} </div>
</div>
</div>
<div class="icon-wrapper"><v-icon class="WMi-ok" style="color: #fff;"></v-icon></div>
<div class="icon-wrapper"><v-icon class="WMi-ok" color="white"></v-icon></div>
</div>
</v-col>
<v-col xl="4" offset-xl="8" class="hidden-md-and-up">
@ -36,7 +36,7 @@
<script>
export default {
props: {
size: { default: "xl12" },
size: { default: "col-xl-2" },
items: { default: []},
},
data: () => ({
@ -46,24 +46,15 @@
</script>
<style lang="scss" scoped>
.image-select {
display: flex;
}
.image-select .thumbnail {
width: 12%;
}
.image-select .item {
position: relative;
border: 1px solid transparent;
transition: 0.2s;
padding: 10px;
margin-bottom: 10px;
width: 12%;
cursor: pointer;
}
.image-select .item .icon-wrapper {
display: none;
width: 30px;
height: 30px;
background-color: var(--color-blue);
text-align: center;
justify-content: center;
@ -85,7 +76,7 @@
display: flex;
position: absolute;
width: 100%;
height: calc(100% - 20px);
height: 100%;
color: #fff;
right: 0px;
top: 0px;
@ -98,7 +89,7 @@
text-align: center;
}
.image-select .item .name .Fa {
font-size: 22px;
font-size: 18px;
}
.image-select .item .name .En {
font-size: 12px;
@ -109,7 +100,7 @@
.image-select .item:hover {
border: 1px solid #2f353b;
padding: 5px;
/*padding: 5px;*/
}
.image-select .item:hover .thumbnail {
-webkit-filter: grayscale(0%);
@ -117,9 +108,8 @@
.image-select .item:hover .name {
visibility: visible;
opacity: 1;
margin: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
width: 100%;
height: 100%;
}
</style>

1
resources/js/Global/scss/Icons/css/fontello-codes.css vendored
Unescape View File

@ -228,6 +228,7 @@
.WMi-emo-saint:before { content: '\e8e2'; } /* '' */
.WMi-emo-grin:before { content: '\e8e3'; } /* '' */
.WMi-emo-tongue:before { content: '\e8e4'; } /* '' */
.WMi-theme:before { content: '\e8e5'; } /* '' */
.WMi-th-list:before { content: '\f00b'; } /* '' */
.WMi-pause:before { content: '\f00e'; } /* '' */
.WMi-play:before { content: '\f00f'; } /* '' */

13
resources/js/Global/scss/Icons/css/fontello-embedded.css vendored
View File

File diff suppressed because one or more lines are too long

1
resources/js/Global/scss/Icons/css/fontello-ie7-codes.css vendored
Unescape View File

@ -228,6 +228,7 @@
.WMi-emo-saint { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e2;&nbsp;'); }
.WMi-emo-grin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e3;&nbsp;'); }
.WMi-emo-tongue { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e4;&nbsp;'); }
.WMi-theme { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e5;&nbsp;'); }
.WMi-th-list { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00b;&nbsp;'); }
.WMi-pause { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00e;&nbsp;'); }
.WMi-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00f;&nbsp;'); }

1
resources/js/Global/scss/Icons/css/fontello-ie7.css vendored
Unescape View File

@ -239,6 +239,7 @@
.WMi-emo-saint { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e2;&nbsp;'); }
.WMi-emo-grin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e3;&nbsp;'); }
.WMi-emo-tongue { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e4;&nbsp;'); }
.WMi-theme { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe8e5;&nbsp;'); }
.WMi-th-list { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00b;&nbsp;'); }
.WMi-pause { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00e;&nbsp;'); }
.WMi-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf00f;&nbsp;'); }

23
resources/js/Global/scss/Icons/css/fontello.css vendored
Unescape View File

@ -1,12 +1,11 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?22850035');
src: url('../font/fontello.eot?22850035#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?22850035') format('woff2'),
url('../font/fontello.woff?22850035') format('woff'),
url('../font/fontello.ttf?22850035') format('truetype'),
url('../font/fontello.svg?22850035#fontello') format('svg');
src: url('../font/fontello.eot?94401016');
src: url('../font/fontello.eot?94401016#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?94401016') format('woff2'),
url('../font/fontello.woff?94401016') format('woff'),
url('../font/fontello.ttf?94401016') format('truetype'),
url('../font/fontello.svg?94401016#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -16,11 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
<<<<<<< HEAD
src: url('../font/fontello.svg?22850035#fontello') format('svg');
=======
src: url('../font/fontello.svg?18248585#fontello') format('svg');
>>>>>>> dev
src: url('../font/fontello.svg?94401016#fontello') format('svg');
}
}
*/
@ -289,6 +284,7 @@
.WMi-emo-saint:before { content: '\e8e2'; } /* '' */
.WMi-emo-grin:before { content: '\e8e3'; } /* '' */
.WMi-emo-tongue:before { content: '\e8e4'; } /* '' */
.WMi-theme:before { content: '\e8e5'; } /* '' */
.WMi-th-list:before { content: '\f00b'; } /* '' */
.WMi-pause:before { content: '\f00e'; } /* '' */
.WMi-play:before { content: '\f00f'; } /* '' */
@ -549,7 +545,6 @@
.WMi-ladder:before { content: '\f5ea'; } /* '' */
.WMi-list-1:before { content: '\f5ec'; } /* '' */
.WMi-telegram-2:before { content: '\f5ed'; } /* '' */
<<<<<<< HEAD
.WMi-willa-engine:before { content: '\f5ee'; } /* '' */
.WMi-en-letters:before { content: '\f5f0'; } /* '' */
.WMi-fa-letters:before { content: '\f5f1'; } /* '' */
@ -562,8 +557,6 @@
.WMi-chat-1:before { content: '\f5fa'; } /* '' */
.WMi-chat-alt:before { content: '\f5fb'; } /* '' */
.WMi-send-message:before { content: '\f5fc'; } /* '' */
=======
>>>>>>> dev
.WMi-oil-can:before { content: '\f613'; } /* '' */
.WMi-account-settings-variant:before { content: '\f631'; } /* '' */
.WMi-truck-monster:before { content: '\f63b'; } /* '' */

BIN
resources/js/Global/scss/Icons/font/fontello.eot
View File

Binary file not shown.

2
resources/js/Global/scss/Icons/font/fontello.svg
Unescape View File

@ -464,6 +464,8 @@
<glyph glyph-name="emo-tongue" unicode="&#xe8e4;" d="M174 800c-61 0-110-65-110-144 0-80 49-145 110-145s110 65 110 145c0 79-49 144-110 144z m476 0c-60 0-109-65-109-144 0-80 49-145 109-145 61 0 110 65 110 145 0 79-49 144-110 144z m121-560l-718-1c-29 0-53-24-53-53 0-30 24-54 53-54l140 0 0-74c0-55 20-108 60-148 46-47 103-60 165-60 57 0 111 17 153 59 41 41 60 94 60 150l0 74 140 0c29 0 53 24 53 53 0 30-24 54-53 54z m-471-109l224 0 0-72c0-27-7-53-28-74-39-39-129-39-168 0-20 21-28 45-28 73l0 73z" horiz-adv-x="824" />
<glyph glyph-name="theme" unicode="&#xe8e5;" d="M718 200c8 0 13 4 13 12l37 78-107 54-33-78c-4-4-4-13 0-17l12-12c21-8 37-17 53-33 5-4 9-4 13-4 8-4 8-4 12 0z m95 49c-8 4-21-4-25-12l-45-99c0-4-4-8 0-12 12-62-21-128-54-165-33-33-90-53-152-53-58 0-107 20-140 53-4 4-16 17-20 33-5-4-9-12-17-12h-206c-12 0-20 8-20 20v288c0 13 8 21 20 21h206c12 0 21-8 21-21v-263c8 16 20 29 37 33 4 0 4 0 8 4 4 4 12 8 21 17 4 4 4 8 4 12s0 4 4 8c4 8 4 17 8 29v4c0 4 0 8 0 12v140c0 13 8 21 21 21h127l17 41h-478c-12 0-20 8-20 21v164c0 13 8 21 20 21h552c4 0 8 0 8-4l41 94c4 4 0 13 0 21-4 4-8 8-16 8h-9-617c-58 0-103-45-103-103v-617c0-58 45-103 103-103h617c58 0 103 45 103 103v263c0 21-8 29-16 33z m-288-82c-25-25-33-49-37-70-4-16-9-29-21-41-25-25-37-29-37-29-8-4-12-8-12-16 0-9 0-13 4-21 29-29 66-41 111-41 49 0 99 16 123 41 42 41 66 128 21 173-41 45-107 45-152 4z m399 683c-29 0-54-16-66-41l-181-428 107-54 202 424c4 9 8 21 8 33 0 37-33 66-70 66z" horiz-adv-x="1000" />
<glyph glyph-name="th-list" unicode="&#xf00b;" d="M292 428v-156c0-26-21-47-47-47h-198c-26 0-47 21-47 47v156c0 26 21 47 47 47h198c26 0 47-21 47-47z m-292-312c0 26 21 47 47 47h198c26 0 47-21 47-47v-157c0-26-21-47-47-47h-198c-26 0-47 21-47 47v157z m245 672c26 0 47-21 47-47v-157c0-25-21-46-47-46h-198c-26 0-47 21-47 46v157c0 26 21 47 47 47h198z m156-876c-26 0-47 21-47 47v157c0 26 21 47 47 47h552c26 0 47-21 47-47v-157c0-26-21-47-47-47h-552z m-47 829c0 26 21 47 47 47h552c26 0 47-21 47-47v-157c0-25-21-46-47-46h-552c-26 0-47 21-47 46v157z m47-516c-26 0-47 21-47 47v156c0 26 21 47 47 47h552c26 0 47-21 47-47v-156c0-26-21-47-47-47h-552z" horiz-adv-x="1000" />
<glyph glyph-name="pause" unicode="&#xf00e;" d="M0 5q0-27 19-46t45-19h127q27 0 45 19t19 46v691q0 27-19 45t-45 19h-127q-27 0-45-19t-19-45v-691z m480 0q0-27 19-46t45-19h127q26 0 45 19t19 46v691q0 27-19 45t-45 19h-127q-27 0-45-19t-19-45v-691z" horiz-adv-x="735.4" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 243 KiB

BIN
resources/js/Global/scss/Icons/font/fontello.ttf
View File

Binary file not shown.

BIN
resources/js/Global/scss/Icons/font/fontello.woff
View File

Binary file not shown.

BIN
resources/js/Global/scss/Icons/font/fontello.woff2
View File

Binary file not shown.

11
resources/js/Global/scss/_vars.scss vendored
Unescape View File

@ -63,6 +63,11 @@ $Brown: #8b4513;
$BrownShadow:rgba(145, 81, 23, 0.5);
$BrownBackground: #fff4ed;
//--------------------------------------------Creme
$Creme: #f8f4e8;
$CremeShadow:rgba(145, 81, 23, 0.5);
$CremeBackground: #fff4ed;
//--------------------------------------------Black
$Black: #2f353b;
$BlackShadow:rgba(0, 0, 0, 0.5);
@ -80,9 +85,9 @@ $TealBackground: #ffe5e9;
$Colors: (Red: $Red, Orange: $Orange, Yellow: $Yellow, Gold: $Gold, Purple: $Purple, Blue: $Blue, Green: $Green, Cyan: $Cyan, LightGray: $LightGray, Gray: $Gray, Brown: $Brown, Black: $Black, White: $White);
$colors: (red: $Red, orange: $Orange, yellow: $Yellow, gold: $Gold, purple: $Purple, blue: $Blue, green: $Green, cyan: $Cyan, light-gray: $LightGray, gray: $Gray, brown: $Brown, black: $Black, white: $White, tael: $Teal);
$Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold: $GoldShadow, purple: $PurpleShadow, blue: $BlueShadow, green: $GreenShadow, cyan: $CyanShadow, gray: $GrayShadow, 'grey.lighten-3': $LightGrayShadow, brown: $BrownShadow, black: $BlackShadow, white: $WhiteShadow, teal: $TealShadow);
$backgrounds: (red: $RedBackground, orange: $OrangeBackground, yellow: $YellowBackground, gold: $GoldBackground, purple: $PurpleBackground, blue: $BlueBackground, green: $GreenBackground, cyan: $CyanBackground, gray: $GrayBackground, 'grey.lighten-3': $LightGrayBackground, brown: $BrownBackground, black: $BlackBackground, white: $WhiteBackground, teal: $TealBackground);
$colors: (red: $Red, orange: $Orange, yellow: $Yellow, gold: $Gold, purple: $Purple, blue: $Blue, dark-blue: $DarkBlue, green: $Green, cyan: $Cyan, light-gray: $LightGray, gray: $Gray, brown: $Brown, black: $Black, white: $White, tael: $Teal);
$Shadows: (red: $RedShadow, orange: $OrangeShadow, yellow: $YellowShadow, gold: $GoldShadow, purple: $PurpleShadow, blue: $BlueShadow, dark-blue: $DarkBlueShadow, green: $GreenShadow, cyan: $CyanShadow, gray: $GrayShadow, 'grey.lighten-3': $LightGrayShadow, brown: $BrownShadow, black: $BlackShadow, white: $WhiteShadow, teal: $TealShadow);
$backgrounds: (red: $RedBackground, orange: $OrangeBackground, yellow: $YellowBackground, gold: $GoldBackground, purple: $PurpleBackground, blue: $BlueBackground, dark-blue: $DarkBlueBackground, green: $GreenBackground, cyan: $CyanBackground, gray: $GrayBackground, 'grey.lighten-3': $LightGrayBackground, brown: $BrownBackground, black: $BlackBackground, white: $WhiteBackground, teal: $TealBackground);
:root {
//-------------------------------------------Main Colors
--color-red: #ee3552;

Write Preview
Loading…
Cancel
Save