itob/SteamworkshopViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init 7

Browse Source
This commit is contained in:
iTob 2025-03-12 20:39:37 +01:00
parent dce2713f4b
commit 4f88c80bb6
3 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -36,6 +36,7 @@
<label for="taWorkshopId">WorkshopIDs</label> <label for="taWorkshopId">WorkshopIDs</label>
<textarea id="taWorkshopId" class="u-full-width" x-model="ids"></textarea> <textarea id="taWorkshopId" class="u-full-width" x-model="ids"></textarea>
<button x-on:click="getModDescription()">load mod descriptions</button> <button x-on:click="getModDescription()">load mod descriptions</button>
<button @click="copyToClipboard()" x-bind:disabled="checkedItems.length == 0">Copy selected</button>
</div> </div>
</div> </div>
<template x-if="items.length > 0"> <template x-if="items.length > 0">
@ -63,7 +64,6 @@
</template> </template>
</tbody> </tbody>
</table> </table>
<span x-text="JSON.stringify(checkedItems)"></span>
</div> </div>
</div> </div>
</template> </template>

5
src/index.js
View File

@ -3,7 +3,7 @@ import './skeleton.css'
import './style.scss' import './style.scss'
import Alpine from 'alpinejs' import Alpine from 'alpinejs'
import {defer, orderBy, sortBy} from "lodash"; import { defer } from "lodash";
import * as cheerio from 'cheerio'; import * as cheerio from 'cheerio';
window.Alpine = Alpine; window.Alpine = Alpine;
@ -16,6 +16,9 @@ document.addEventListener('alpine:init', () => {
items: [], items: [],
loading: false, loading: false,
checkedItems: [], checkedItems: [],
copyToClipboard() {
navigator.clipboard.writeText(this.checkedItems.join(';'));
},
checkItems(e) { checkItems(e) {
if (e.target.checked) { if (e.target.checked) {
this.checkedItems = this.items.map(item => item.id); this.checkedItems = this.items.map(item => item.id);

13
src/style.scss
View File

@ -2,6 +2,7 @@ $text: #906b3a;
$hover: #C9AE5D; $hover: #C9AE5D;
$bg: #222; $bg: #222;
$secColor: #333; $secColor: #333;
$primary: #ccc;
body { body {
color: $text; color: $text;
@ -10,15 +11,17 @@ body {
a, button { a, button {
color: $text; color: $text;
background-color: $bg; background-color: $primary;
} }
button:focus { button[disabled] {
color: $text; background:$bg;
background-color: $bg; border-color: $primary;
color: $secColor;
text-shadow:none;
} }
button:hover { button[disabled=false]:hover {
color: $bg; color: $bg;
background-color: $text; background-color: $text;
} }