inkch/txtdot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Interface improvements (#74)

Browse Source 
* fix: interface style improvements

and components in ejs templates

* fix: improvement of improvements

* Redesign: kind of MD3

* Working url/search switch

* formatting

* Add switch animation, adjust sizes, adjust btn colors, rename bg2 to outline

* Format

---------

Co-authored-by: DarkCat09 <gh@dc09.ru>
This commit is contained in:
Artemy Egorov
2024-02-14 10:23:13 +03:00
committed by GitHub
parent ead78e79ab
commit 3b5f402d77
13 changed files with 250 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
templates/components/form-main.ejs Normal file
View File

@ -0,0 +1,51 @@
<% search = config.search.enabled %>
<% if (search) { %>
<input type="checkbox" id="switch-search" checked>
<label for="switch-search" class="switch-label">
<span>URL</span>
<span class="switch-btn"></span>
<span>Search</span>
</label>
<form action="/search" method="get" class="input-grid main-form-search">
<div class="input">
<input type="text" name="q" id="search" placeholder="Search">
</div>
<div class="input">
<input type="submit" id="submit" class="button" value="Go">
</div>
</form>
<% } %>
<form action="/get" method="get" class="input-grid <%= search ? "main-form-url" : "" %>">
<div class="input">
<input type="text" name="url" id="url" placeholder="URL">
</div>
<div class="input">
<input type="submit" id="submit" class="button" value="Parse">
</div>
<div class="input-row">
<div class="input">
<label for="engine">Engine</label>
<select name="engine">
<option value="" selected>Default</option>
<% engineList.forEach((engine) => { %>
<option value="<%= engine %>">
<%= engine %>
</option>
<% }) %>
</select>
</div>
<div class="input">
<label for="format">Format</label>
<select name="format">
<option value="html" selected>HTML</option>
<option value="text">Text</option>
</select>
</div>
</div>
</form>

14
templates/components/menu.ejs Normal file
View File

@ -0,0 +1,14 @@
<div class="menu">
<a class="button secondary" href="/">Home</a>
<a class="button secondary" href="<%= remoteUrl %>">Original page</a>
<%
if (config.search.enabled) {
%>
<form class="form-search" action="/search" method="get">
<input type="text" name="q" id="search" placeholder="Search">
<input class="button" type="submit" value="Go"/>
</form>
<%
}
%>
</div>

6
templates/components/search-styles.ejs Normal file
View File

@ -0,0 +1,6 @@
<%
if (config.search.enabled) {
%><link rel="stylesheet" href="/static/search.css">
<link rel="stylesheet" href="/static/form-inputs.css"><%
}
%>

39
templates/get.ejs
View File

@ -1,38 +1,19 @@
<!DOCTYPE html>
<!doctype html>
<html lang="<%= parsed.lang %>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex, nofollow">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="noindex, nofollow" />
<title><%= parsed.title %></title>
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/get.css">
<%
if (config.search.enabled) {
%><link rel="stylesheet" href="/static/search.css"><%
}
%>
<link rel="stylesheet" href="/static/common.css" />
<link rel="stylesheet" href="/static/get.css" />
<%- include('./components/search-styles.ejs') %>
</head>
<body>
<main>
<div class="menu">
<a class="button secondary" href="/">Home</a>
<a class="button secondary" href="<%= remoteUrl %>">Original page</a>
<%
if (config.search.enabled) {
%>
<form class="right" action="/search" method="get">
<input type="text" name="q" id="search" placeholder="Search">
<input class="button" type="submit" value="Go"/>
</form>
<%
}
%>
</div>
<p class="title">
<%= parsed.title %>
</p>
<%- include('./components/menu.ejs') %>
<p class="title"><%= parsed.title %></p>
<%- parsed.content %>
</main>
</body>

59
templates/index.ejs
View File

@ -9,71 +9,20 @@
<link rel="stylesheet" href="/static/common.css">
<link rel="stylesheet" href="/static/index.css">
<link rel="stylesheet" href="/static/form.css">
<link rel="stylesheet" href="/static/form-inputs.css">
</head>
<body>
<main>
<header>
<h1>txt<span class="dot">.</span></h1>
<p class="menu">
<div class="menu">
<a href="https://github.com/TxtDot/txtdot/releases/latest" class="button secondary">v<%= publicConfig.version %></a>
<a href="https://github.com/txtdot/txtdot" class="button secondary">GitHub</a>
<a href="https://txtdot.github.io/documentation" class="button secondary">Docs</a>
</p>
</div>
<p><%= publicConfig.description %></p>
</header>
<%
if (config.search.enabled) {
%>
<form action="/search" method="get" class="input-grid">
<div class="input">
<input type="text" name="q" id="search" placeholder="Search">
</div>
<div class="input">
<input type="submit" id="submit" class="button" value="Go">
</div>
</form>
<%
%><details style="margin-top: 1rem;"><summary>Advanced</summary><%
}
%>
<form action="/get" method="get" class="input-grid">
<div class="input">
<input type="text" name="url" id="url" placeholder="URL">
</div>
<div class="input">
<input type="submit" id="submit" class="button" value="Parse">
</div>
<div class="input-row">
<div class="input">
<label for="engine">Engine</label>
<select name="engine">
<option value="" selected>Default</option>
<% engineList.forEach((engine)=> {
%>
<option value="<%= engine %>">
<%= engine %>
</option>
<%
})
%>
</select>
</div>
<div class="input">
<label for="format">Format</label>
<select name="format">
<option value="html" selected>HTML</option>
<option value="text">Text</option>
</select>
</div>
</div>
</form>
<%
if (config.search.enabled) {
%></details><%
}
%>
<%- include('./components/form-main.ejs') %>
</main>
</body>
</html>