Skip to content

Commit

Permalink
optimize css on mobile phones
Browse files Browse the repository at this point in the history
  • Loading branch information
diauweb committed Oct 5, 2023
1 parent a0d478c commit cd94210
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 16 deletions.
3 changes: 1 addition & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,12 @@ Thanks for Dimbreath's [Genshin Data](https://github.com/Dimbreath/GenshinData)

## Features
- Search any text occurrance in game.
- Show text changes among versions.
- Show related dialogs, talks, and quests.

## Run Weaselthief
- Install Node.JS 16+ and MongoDB
- Download [latest build](https://github.com/diauweb/Genshin-WeaselThief/releases/latest) from Release page.
- Place your GenshinData git repository into the project folder.
- Place your GenshinData files into the project folder.
- Run `index.js` to build data & run

## Develop Weaselthief
Expand Down
7 changes: 6 additions & 1 deletion src/lib/components/Dialogs.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<Translated id={d.TalkContentTextMapHash} />
</a>
<div class="uk-accordion-content">
<table class="uk-table uk-table-small">
<table class="uk-table uk-table-small sm-break-table">
<tr>
<th>Id</th>
<td>{d.Id}</td>
Expand Down Expand Up @@ -81,4 +81,9 @@
font-family: monospace;
}
@media(max-width: 640px) {
.sm-break-table th,td {
display: table-row;
}
}
</style>
30 changes: 22 additions & 8 deletions src/lib/components/SearchBar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,30 @@

<form method="POST" action="/">
<input type="search" name="kw" class="uk-input" value={value} placeholder="Search through game texts..."/>
<select class="uk-select option-inline uk-margin-top uk-margin-right" name="lang" value={lang}>
<option value="cn">CHS</option>
<option value="en">EN</option>
<option value="jp">JP</option>
</select>
<button type="submit" class="uk-button uk-button-primary uk-margin-top">Search</button>

<div class="uk-flex buttons-column-small">
<select class="uk-select uk-margin-top uk-margin-right option-inline" name="lang" value={lang}>
<option value="cn">CHS</option>
<option value="en">EN</option>
<option value="jp">JP</option>
</select>
<button type="submit" class="uk-button uk-button-primary uk-margin-top">Search</button>
</div>
</form>

<style>
<style class="postcss">
.option-inline {
width: 10% !important;
width: 20% !important;
}
@media(max-width: 640px) {
.buttons-column-small {
flex-direction: column;
}
.option-inline {
width: auto !important;
}
}
</style>
2 changes: 1 addition & 1 deletion src/routes/(app)/+page.server.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Actions, PageServerLoad } from './$types';
import type { Actions } from './$types';
import { redirect } from "@sveltejs/kit";

export const actions: Actions = {
Expand Down
10 changes: 6 additions & 4 deletions src/routes/(app)/search/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@

<SearchBar lang={data.lang} value={value}/>

<table class="uk-table uk-table-divider uk-table-small uk-table-striped">
<table class="uk-table uk-table-divider uk-table-small uk-table-striped sm-break-table">
<tbody>
{#each data.result as e}
<tr>
<td>
<td class="td-hash">
<b><a href={`/text/${e.hash}`}>{e.hash}</a></b>
</td>
<!-- <td>
Expand All @@ -41,7 +41,9 @@
</table>

<style>
.weak {
color: gray;
@media(max-width: 640px) {
.sm-break-table td {
display: table-row;
}
}
</style>

0 comments on commit cd94210

Please sign in to comment.