Skip to content

Commit

Permalink
🌈 style: replaced all svg with sprite.svg
Browse files Browse the repository at this point in the history
  • Loading branch information
@shurco
shurco committed Jul 27, 2023
1 parent a7d45b2 commit a1d5bcf
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 39 deletions.
7 changes: 3 additions & 4 deletions web/views/admin/components/form/button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,9 @@ export default {
class="group relative inline-flex items-center overflow-hidden rounded px-8 py-3 text-white"
:class="color ? 'bg-'+color+'-600 active:bg-'+color+'-500' : 'bg-green-600 active:bg-'+color+'-500', ico ? 'focus:outline-none focus:ring' : ''">
<span class="absolute -start-full transition-all group-hover:start-4" v-if="ico==='row'">
<svg class="h-5 w-5 rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
<span class="absolute -start-full transition-all group-hover:start-4" v-if="ico">
<svg class="h-4 w-4">
<use xlink:href="/assets/img/sprite.svg#arrow-right" v-if="ico==='row'" />
</svg>
</span>
Expand Down
28 changes: 5 additions & 23 deletions web/views/admin/components/form/input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,30 +64,12 @@ export default {
</span>
<span class="absolute inset-y-0 end-0 grid place-content-center px-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='email'">
<path stroke-linecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
<svg class="h-4 w-4" >
<use xlink:href="/assets/img/sprite.svg#at-symbol" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='email'" />
<use xlink:href="/assets/img/sprite.svg#finger-print" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='password'" />
<use xlink:href="/assets/img/sprite.svg#glob-alt" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='domain'" />
<use xlink:href="/assets/img/sprite.svg#key" :class="error? 'text-red-500' : 'text-gray-400'" v-if="ico==='key'" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='password'">
<path stroke-linecap="round" stroke-linejoin="round"
d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='domain'">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-5 h-5 text-gray-400" :class="error? 'border-red-500' : ''" v-if="ico==='key'">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
</svg>
</span>
</label>
<span class="text-sm text-red-500 pl-4" v-if="error">{{ error }}</span>
Expand Down
1 change: 1 addition & 0 deletions web/views/admin/layouts/clear.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<script src="/assets/js/main.js" type="module"></script>
<link href="/assets/css/notification.css?v=3.1.1" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
<link href="/assets/css/main.css" rel="stylesheet">
<script>
const { onMounted, onUpdated, onUnmounted, ref, getCurrentInstance, components } = Vue;
const { defineRule, Form, Field } = VeeValidate;
Expand Down
20 changes: 13 additions & 7 deletions web/views/admin/layouts/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<script src="/assets/js/main.js" type="module"></script>
<link href="/assets/css/notification.css?v=3.1.1" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
<link href="/assets/css/main.css" rel="stylesheet">
<script>
const { onMounted, onUpdated, onUnmounted, ref, watch, getCurrentInstance, components, directives } = Vue;
const { defineRule, Form, Field } = VeeValidate;
Expand Down Expand Up @@ -42,24 +43,29 @@
<ul>
<li>
<a href="/_/products"
class="flex items-center px-6 text-sm font-medium text-gray-900 p-4 hover:bg-gray-50 hover:text-gray-500 {# if eq .Menu "products" #}bg-gray-100{# else #}bg-white{# end #}">Products</a>
class="flex items-center px-6 text-sm font-medium text-gray-900 p-4 hover:bg-gray-50 hover:text-gray-500 {# if eq .Menu "products" #}bg-gray-100{# else #}bg-white{# end #}">
Products
</a>
</li>

<li>
<a href="/_/settings"
class="flex items-center px-6 text-sm font-medium text-gray-900 p-4 hover:bg-gray-50 hover:text-gray-500 {# if eq .Menu "settings" #}bg-gray-100{# else #}bg-white{# end #}">Settings</a>
class="flex items-center px-6 text-sm font-medium text-gray-900 p-4 hover:bg-gray-50 hover:text-gray-500 {# if eq .Menu "settings" #}bg-gray-100{# else #}bg-white{# end #}">
Settings
</a>
</li>
</ul>
</div>

<div class="sticky inset-x-0 bottom-0 border-t border-gray-100">
<a href="/" target="_blank"
class="flex items-center px-6 text-sm font-medium text-gray-500 bg-white p-4 hover:bg-green-50 hover:text-green-500">Open
site</a>
class="flex items-center px-6 text-sm font-medium text-gray-500 bg-white p-4 hover:bg-green-50 hover:text-green-500">
Open site
</a>

<a href="#"
class="flex items-center px-6 text-sm font-medium text-gray-500 bg-white p-4 hover:bg-red-50 hover:text-red-500"
@click="signOut">Logout</a>
<a href="#" class="flex items-center px-6 text-sm font-medium text-gray-500 bg-white p-4 hover:bg-red-50 hover:text-red-500" @click="signOut">
Logout
</a>
</div>
</div>
</div>
Expand Down
32 changes: 27 additions & 5 deletions web/views/admin/products.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Products</h1>
</div>
</div>


{# if .Products #}
<div class="mx-auto">
<table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
Expand All @@ -17,15 +16,27 @@ <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Products</h1>
<th class="whitespace-nowrap px-4 py-2 font-medium text-gray-900">Name</th>
<th class="whitespace-nowrap w-32 px-4 py-2 font-medium text-gray-900">URL</th>
<th class="whitespace-nowrap w-32 px-4 py-2 font-medium text-gray-900">Price</th>
<th class="whitespace-nowrap w-32 px-4 py-2 font-medium text-gray-900"></th>
</tr>
</thead>

<tbody class="divide-y divide-gray-200">
{# range .Products #}
<tr class="hover:bg-gray-100 active:bg-gray-100 cursor-pointer" @click="openDrawer('{# .ID #}', '{# .Name #}')">
<td class="whitespace-nowrap px-4 py-2 text-gray-900">{# .Name #}</td>
<td class="whitespace-nowrap px-4 py-2 text-gray-700">{# .URL #}</td>
<td class="whitespace-nowrap px-4 py-2 text-gray-700">{{ costFormat({# .Price.Amount #} ) }} {#.Price.Currency#}</td>
<td class="whitespace-nowrap px-4 py-2">
{# .Name #}
{# if eq .StripeID "" #}
<badge type="exclamation" class="bg-red-100 text-red-700">Stripe ID</badge>
{# end #}

</td>
<td class="whitespace-nowrap px-4 py-2">{# .URL #}</td>
<td class="whitespace-nowrap px-4 py-2">{{ costFormat({# .Price.Amount #} ) }}{#.Price.Currency#}</td>
<td class="whitespace-nowrap px-4 py-2">
<svg class="h-5 w-5">
<use xlink:href="/assets/img/sprite.svg#pencil-square" />
</svg>
</td>
</tr>
{# end #}
</tbody>
Expand All @@ -36,9 +47,18 @@ <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Products</h1>
{# end #}

<drawer :is-open="isDrawerOpen" max-width="700px" @close="closeDrawer" :title="productName">

<div class="flow-root">
<dl class="-my-3 divide-y divide-gray-100 text-sm">

<div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
<dt class="font-medium text-gray-900">Stripe ID</dt>
<dd class="text-gray-700 sm:col-span-2">
<badge type="exclamation" class="bg-red-100 text-red-700" v-if="productInfo.stripe_id==''">Stripe ID</badge>
<span v-else>{{ productInfo.stripe_id }}</span>
</dd>
</div>

<div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
<dt class="font-medium text-gray-900">ID</dt>
<dd class="text-gray-700 sm:col-span-2">{{ productInfo.id }}</dd>
Expand Down Expand Up @@ -109,11 +129,13 @@ <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Products</h1>
<script type="module">
import FormButton from './components/form/button.js';
import Drawer from './components/drawer.js';
import Badge from './components/badge.js';

Vue.createApp({
components: {
FormButton,
Drawer,
Badge,
},

data() {
Expand Down

0 comments on commit a1d5bcf

Please sign in to comment.