Skip to content

Commit

Permalink
tags.html: restyle
Browse files Browse the repository at this point in the history
  • Loading branch information
@m4rc1e
m4rc1e committed Nov 20, 2024
1 parent b79d0c2 commit fbf7d63
Showing 1 changed file with 75 additions and 92 deletions.
167 changes: 75 additions & 92 deletions .ci/tags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,79 @@
<script src="https://unpkg.com/[email protected]/papaparse.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>


<body>
<div id="app">
<link v-for="family in uniqueFamilies" :href="familyLink(family)" rel="stylesheet">

<h1>Google Fonts Tagger</h1>
<!-- Navbar -->
<div style="max-height: 3rem" class="navbar bg-base-100 fixed left-0 top-0 shadow">
<a class="btn btn-ghost btn-sm text-xl">GF Tagger</a>
<ul class="menu menu-horizontal px-1">
<li>
<details>
<summary>File</summary>
<ul class="shadow w-36">
<li><a @click="saveCSV">Export CSV</a></li>
<li><a @click="prCSV">Open PR</a></li>
</ul>
</details>
</li>
<li>
<details>
<summary>{{ CurrentCategory }}</summary>
<ul class="shadow">
<div class="cont" style="max-height: 16rem; overflow: scroll">
<li v-for="category in sortedCategories()">
<a @click="CurrentCategory = category">{{ category }}</a>
</li>
</div>
</ul>
</details>
</li>
<li>
<form @submit.prevent="commit">
<div class="join" style="padding-top: 12px;">
<input class="join-item input input-sm input-bordered w-full max-w-xs" v-model="commit" required placeholder="refs/heads/main">
<button class="join-item btn btn-sm">checkout</button>
</div>
</form>
</li>
</ul>
</div>

<div id="panel">
<div class="panel-tile">
<form @submit.prevent="loadCSV">
<label>Checkout Commit:</label>
<input v-model="commit" required placeholder="refs/heads/main">
<button>Checkout</button>
</form>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>

<label>Current tag:</label>
<select v-model="CurrentCategory" style="max-width: 300px;">
<option v-for="category in sortedCategories()" :key="category" :value="category">
{{ category }}
</option>
</select>
</div>
<!-- Add font panel -->
<div id="panel" class="fixed top-20 right-0 bg-base-100 p-5 shadow">
<div class="panel-tile">
<form @submit.prevent="AddTag">
<label>Add Tag:</label>
<input v-model="newTag" required placeholder="Tag Name">
<button>Add</button>
</form>
</div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>

<div class="panel-tile">
<div class="label label-xs">
<span class="label-text label-xs">Add Tag</span>
</div>
<div class="join">
<input class="join-item input input-xs input-bordered w-full max-w-xs" v-model="newTag" required placeholder="/Expressive/Funky">
<button class="join-item btn btn-xs">Add</button>
</div>
</form>
<div class="divider"></div>
<form @submit.prevent="AddFamily">
<label>Add family:</label>
<input list="items" v-model="newFamily" required placeholder="Family Name">
<datalist id="items">
<option v-for="family in uniqueFamilies" :value="family">
</datalist>
<input v-model="newWeight" required placeholder="Score">
<button>Add</button>
<div class="label lavel-xs">
<span class="label-text label-xs">Add Family</span>
</div>
<div class="join">
<input class="join-item input input-xs input-bordered w-full max-w-xs" list="items" v-model="newFamily" required placeholder="Family Name">
<datalist id="items">
<option v-for="family in uniqueFamilies" :value="family">
</datalist>
<input class="join-item input input-xs input-bordered btn-square" v-model="newWeight" required placeholder="Score">
<button class="join-item btn btn-xs">Add</button>
</div>
</form>
</div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
<div class="divider"></div>

<div class="panel-tile" style="max-height: 100px; overflow: scroll;">
<label>History</label>
<div v-if="isEdited">
Expand All @@ -56,20 +84,15 @@ <h1>Google Fonts Tagger</h1>
<p style="font-size: 10pt;">No changes</p>
</div>
</div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
<div style="border: 0.1px solid rgb(161, 161, 161); margin-bottom: 10pt; margin-top: 10pt;"></div>
<div class="panel-tile">
<button @click="prCSV">Open Pull Request</button>
<button style="float: right;" @click="saveCSV">Save CSV</button>
</div>

</div>

<div v-if="sortedFamilies.length === 0">
<p>No families found for this tag. Please add some</p>
</div>
<div class="item" v-for="family in sortedFamilies" :key="family.Family">
<family-item :family="family" :ready="ready" @edited="edited" @remove="removeFamily"></family-item>
<div class="mt-20">
<div class="item" v-for="family in sortedFamilies" :key="family.Family">
<family-item :family="family" :ready="ready" @edited="edited" @remove="removeFamily"></family-item>
</div>
</div>

</div>
Expand All @@ -79,20 +102,19 @@ <h1>Google Fonts Tagger</h1>
Vue.component('family-item', {
props: ['family', 'ready'],
template: `
<div class="item">
<div style="float: left; width: 150px;">
<b>{{ family.Family }}</b>
</div>
<div style="float: left; width: 100px;">
<input style="width: 50px;" v-model.lazy="family.Weight" @change="edited" placeholder="family.Weight">
<button @click="removeFamily">X</button>
</div>
<div v-if="ready" :style="familyStyle" contenteditable="true">
{{ familyPangram }}
</div>
<div class="item p-1">
<div class="join">
<b class="pr-2">{{ family.Family }}</b>
<input style="width: 3rem;" class="join-item input input-xs input-bordered btn-square" v-model.lazy="family.Weight" @change="edited" placeholder="family.Weight">
<button class="btn btn-xs join-item pr-2" @click="removeFamily">X</button>
</div>
<div v-if="ready" :style="familyStyle" contenteditable="true">
{{ familyPangram }}
</div>
<div v-else>
Loading...
</div>
<div class="divider"></div>
</div>
`,
methods: {
Expand Down Expand Up @@ -370,43 +392,4 @@ <h1>Google Fonts Tagger</h1>
font-family: "Adobe NotDef";
src: url(https://cdn.jsdelivr.net/gh/adobe-fonts/adobe-notdef/AND-Regular.ttf);
}
#app {
font-family: "Roboto", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
margin-top: 60px;
}
#panel {
position: fixed;
top: 0;
right: 0;
padding: 10px;
background-color: white;
box-shadow: 3px 3px 3px lightgray;
}
.panel-tile {
margin-bottom: 10px;
}
.familyy {
padding-top: 10px;
padding-bottom: 10px;
}
.item {
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #000;
}
#edited-panel {
position: fixed;
left: 0px;
top: 0px;
width: 80px;
padding: 5px;
background-color: black;
color: white;
font-weight: bold;
}
</style>

0 comments on commit fbf7d63

Please sign in to comment.