seekseek
/
ui
1
0
Fork 1
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

Labels Milestones

New Pull Request

WIP: supakeen/ui-improvements #1

Draft
supakeen wants to merge 10 commits from supakeen/ui:supakeen/ui-improvements into master
pull from: supakeen/ui:supakeen/ui-improvements
merge into: seekseek:master
Conversation 1 Commits 10 Files Changed 6
6 changed files with 279 additions and 166 deletions
Show Stats Download Patch File Download Diff File

171
public/css/style.css
Unescape Escape View File

@ -1,75 +1,110 @@
:root {
--color-background: #f9f9f9;
--color-background-attention: #ffffff;
--color-text: #000000;
--color-text-inverted: #ffffff;
--color-text-subdued: #4f4e4e;
--color-text-attention: teal;
--color-text-warning: rgb(218, 13, 13);
--invert: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #222222;
--color-background-attention: #000000;
--color-text: #f9f9f9;
--color-text-inverted: #ffffff;
--color-text-subdued: #f1f1f1;
--color-text-warning: rgb(218, 13, 13);
--invert: 1;
}
}
* {
box-sizing: border-box;
}
html, body {
/* background-color: rgb(248, 249, 236); */
background-color: #f9f9f9ff;
color: var(--color-text);
background: var(--color-background);
font-family: sans-serif;
min-height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
max-width: 900px;
margin-left: 1em;
margin-right: 1em;
html {
height: 100%;
}
.header {
margin-top: 1em;
margin-left: 0.5em;
margin-right: 0.5em;
padding-bottom: .7em;
border-bottom: 2px solid black;
body {
height: 100%;
display: grid;
grid-template:
"header" 6rem
"content" 1fr;
}
.contents {
margin-bottom: 2em;
padding: .7em 0;
header {
grid-area: header;
border-bottom: 2px solid var(--color-text-subdued);
}
.footer {
position: fixed;
bottom: 0;
left: 0.5em;
right: 0.5em;
header .logoContainer {
display: inline-block;
position: relative;
}
box-sizing: border-box;
border-top: 1px solid black;
height: 2em;
padding: 0.2em;
background-color: #f9f9f9ff;
}
header .logoContainer .logo {
height: 5rem;
filter: invert(var(--invert));
}
.footer .wrapper {
margin-left: calc(1em - 0.5em);
}
header .logoContainer .siteTag {
position: absolute;
right: 0;
bottom: 0;
.logoContainer {
display: inline-block;
position: relative;
color: var(--color-text-attention);
font-size: 1.3em;
}
header .logoContainer .betaTag {
width: 1px; /* Out-of-box alignment hack */
position: absolute;
right: -.3rem;
bottom: 0;
font-style: italic;
color: var(--color-text-warning);
font-size: 1.3rem;
}
main {
grid-area: content;
margin: .5rem 0;
padding: 0 0 2rem 0;
}
.logoContainer .logo {
height: 5em;
}
main div.search input { width: 100%; }
.logoContainer .siteTag {
position: absolute;
right: 0;
bottom: 0;
footer {
position: fixed;
bottom: 0;
line-height: 2rem;
border-top: 1px solid var(--color-text-subdued);
background: var(--color-background);
}
color: teal;
font-size: 1.3em;
main a, footer a {
color: var(--color-text-attention);
}
.logoContainer .betaTag {
width: 1px; /* Out-of-box alignment hack */
position: absolute;
right: -.3em;
bottom: 0;
font-style: italic;
main a:hover, footer a:hover { text-decoration: none; }
color: rgb(218, 13, 13);
font-size: 1.3em;
}
article {
line-height: 1.25rem;
}
.counter {
margin-bottom: .5em;
@ -78,11 +113,35 @@ html, body {
text-align: right;
}
.staticContent {
margin: 0 2em;
max-width: 900px;
}
.linkSpacer {
margin: 0 .5em;
}
@media only screen and (max-width: 1000px) {
body {
width: 100%;
}
footer {
width: calc(100% - 1rem);
}
body {
padding: 1rem .5rem 0 .5rem;
}
}
@media only screen and (min-width: 1400px) {
body {
width: 60rem;
}
footer {
width: calc(60rem - 4rem);
}
body {
padding: 1rem 2rem 0 2rem;
}
}

178
src/css/style.css
Unescape Escape View File

@ -1,77 +1,113 @@
$pagePadding: 0.5em;
$background: #f9f9f9ff;
:root {
--color-background: #f9f9f9;
--color-background-attention: #ffffff;
--color-text: #000000;
--color-text-inverted: #ffffff;
--color-text-subdued: #4f4e4e;
--color-text-attention: teal;
--color-text-warning: rgb(218, 13, 13);
--invert: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #222222;
--color-background-attention: #000000;
--color-text: #f9f9f9;
--color-text-inverted: #ffffff;
--color-text-subdued: #f1f1f1;
--color-text-warning: rgb(218, 13, 13);
--invert: 1;
}
}
* {
box-sizing: border-box;
}
html, body {
/* background-color: rgb(248, 249, 236); */
background-color: $background;
color: var(--color-text);
background: var(--color-background);
font-family: sans-serif;
min-height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
max-width: 900px;
margin-left: 1em;
margin-right: 1em;
html {
height: 100%;
}
.header {
margin-top: 1em;
margin-left: $pagePadding;
margin-right: $pagePadding;
padding-bottom: .7em;
border-bottom: 2px solid black;
body {
height: 100%;
display: grid;
grid-template:
"header" 6rem
"content" 1fr;
}
.contents {
margin-bottom: 2em;
padding: .7em 0;
header {
grid-area: header;
border-bottom: 2px solid var(--color-text-subdued);
.logoContainer {
display: inline-block;
position: relative;
.logo {
height: 5rem;
filter: invert(var(--invert));
}
.siteTag {
position: absolute;
right: 0;
bottom: 0;
color: var(--color-text-attention);
font-size: 1.3em;
}
.betaTag {
width: 1px; /* Out-of-box alignment hack */
position: absolute;
right: -.3rem;
bottom: 0;
font-style: italic;
color: var(--color-text-warning);
font-size: 1.3rem;
}
}
}
.footer {
position: fixed;
bottom: 0;
left: $pagePadding;
right: $pagePadding;
main {
grid-area: content;
margin: .5rem 0;
padding: 0 0 2rem 0;
box-sizing: border-box;
border-top: 1px solid black;
height: 2em;
padding: 0.2em;
background-color: $background;
.wrapper {
margin-left: calc(1em - $pagePadding);
div.search {
input { width: 100%; }
}
}
.logoContainer {
display: inline-block;
position: relative;
.logo {
height: 5em;
}
footer {
position: fixed;
bottom: 0;
line-height: 2rem;
border-top: 1px solid var(--color-text-subdued);
background: var(--color-background);
}
.siteTag {
position: absolute;
right: 0;
bottom: 0;
main, footer {
a {
color: var(--color-text-attention);
color: teal;
font-size: 1.3em;
&:hover { text-decoration: none; }
}
}
.betaTag {
width: 1px; /* Out-of-box alignment hack */
position: absolute;
right: -.3em;
bottom: 0;
font-style: italic;
color: rgb(218, 13, 13);
font-size: 1.3em;
}
article {
line-height: 1.25rem;
}
.counter {
@ -81,11 +117,35 @@ html, body {
text-align: right;
}
.staticContent {
margin: 0 2em;
max-width: 900px;
}
.linkSpacer {
margin: 0 .5em;
}
@media only screen and (max-width: 1000px) {
body {
width: 100%;
}
footer {
width: calc(100% - 1rem);
}
body {
padding: 1rem .5rem 0 .5rem;
}
}
@media only screen and (min-width: 1400px) {
body {
width: 60rem;
}
footer {
width: calc(60rem - 4rem);
}
body {
padding: 1rem 2rem 0 2rem;
}
}

37
src/frontend/components/datasheet-search.css
Unescape Escape View File

@ -1,39 +1,38 @@
.query {
font-size: 1.3em;
background-color: white;
color: black;
border: 1px solid teal;
font-size: 1.3rem;
background-color: var(--color-background-attention);
color: var(--color-text);
border: 1px solid var(--color-text-attention);
border-radius: 5px;
padding: .4em .8em;
padding: .4rem .8rem;
width: 100%;
box-sizing: border-box;
}
.noResults {
padding: .6em 1em;
padding: .6rem 1rem;
}
.results {
border: 1px solid teal;
border: 1px solid var(--color-text-attention);
border-radius: 5px;
/* margin-top: 1em; */
.result {
border-top: 1px solid teal;
padding: .6em 1em;
font-size: .8em;
border-top: 1px solid var(--color-text-attention);
padding: .6rem 1rem;
font-size: .8rem;
&.first {
border-top: 0;
font-size: 1em
font-size: 1rem
}
.name {
font-size: 1.3em;
font-size: 1.3rem;
.manufacturer {
color: #4f4e4e;
margin-right: .3em;
color: var(--color-text-subdued);
margin-right: .3rem;
}
.model {
@ -42,7 +41,7 @@
}
.description {
color: #4f4e4e;
color: var(--color-text-subdued);
margin-top: .2em;
}
@ -55,9 +54,9 @@
margin-top: -.3em;
margin-right: -.7em;
border: 1px solid #006262;
background-color: #039f9f;
color: white;
border: 1px solid var(--color-text);
background-color: var(--color-text-attention);
color: var(--color-text-inverted);
}
}
}

48
src/views/_layout.jsx
Unescape Escape View File

@ -13,33 +13,29 @@ module.exports = function Layout({ children }) {
<link rel="stylesheet" href="/css/style.css"/>
</head>
<body>
<div className="header">
<div className="wrapper">
<a className="logoContainer" href="/">
<img src="/images/logo.svg" alt="seekseek logo" className="logo"/>
<span className="siteTag">datasheets</span>
<span className="betaTag">beta</span>
</a>
</div>
</div>
<div className="contents">
<header>
<a className="logoContainer" href="/">
<img src="/images/logo.svg" alt="seekseek logo" className="logo"/>
<span className="siteTag">datasheets</span>
<span className="betaTag">beta</span>
</a>
</header>
<main>
{children}
</div>
<div className="footer">
<div className="wrapper">
<a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net" className="chat">
Come chat with us!
</a>
<span className="linkSpacer">•</span>
<a href="/technology" className="chat">
Technology
</a>
<span className="linkSpacer">•</span>
<a href="/contact" className="chat">
Contact/Abuse
</a>
</div>
</div>
</main>
<footer>
<a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net" className="chat">
Come chat with us!
</a>
<span className="linkSpacer">•</span>
<a href="/technology" className="chat">
Technology
</a>
<span className="linkSpacer">•</span>
<a href="/contact" className="chat">
Contact/Abuse
</a>
</footer>
<script src="/js/bundle.js"></script>
</body>
</html>

4
src/views/contact.jsx
Unescape Escape View File

@ -7,7 +7,7 @@ const Layout = require("./_layout");
module.exports = function Contact() {
return (
<Layout>
<div className="staticContent">
<article>
<h2>Do you have questions about SeekSeek, or do you want to contribute to the project?</h2>
<p>Please <a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net">join us in our Matrix room</a>!</p>
<p>We actively watch the channel, and we're always happy to answer any questions you might have. If you have a criticism, we encourage you to share that too! The only requirement is that you do so constructively and respectfully. SeekSeek is a community project, and your feedback is crucial to its success!</p>
@ -27,7 +27,7 @@ module.exports = function Contact() {
<p><strong>If you would like to request a copyright takedown:</strong> If you are the copyright holder of datasheet(s) listed in our search, you can of course request that we remove these datasheets from the results, and we will do so if your report is valid.</p>
<p>However, we want to ask that you talk with us about it first - we are very open to addressing any practical concerns you may have, and it's not good for <em>anybody</em> to just remove them entirely. Your customers will find it more difficult to find documentation on your products, and that will do no good for your business either!</p>
</div>
</article>
</Layout>
);
};

7
src/views/technology.jsx
Unescape Escape View File

@ -7,7 +7,7 @@ const Layout = require("./_layout");
module.exports = function Technology() {
return (
<Layout>
<div className="staticContent">
<article>
<h1>The technology</h1>
<p>So... what makes SeekSeek tick? Let&#39;s get the boring bits out of the way first:</p>
@ -157,14 +157,13 @@ module.exports = function Technology() {
<p>At the time of writing, documentation is still pretty lacking across these repositories, and the code in the srap
and UI repositories in particular is pretty rough! This will be improved upon quite soon, as SeekSeek becomes
more polished.</p>
<h2 id="final-words">Final words</h2>
<p>Of course, there are many more details that I haven't covered in this post, but hopefully this gives you an idea of how SeekSeek is put together, and why!</p>
<p>Has this post made you interested in working on SeekSeek, or maybe your own custom srap-based project? <a
href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&amp;via=matrix.org&amp;via=librepush.net">Drop
by in the chat!</a> We&#39;d be happy to give you pointers :)</p>
</div>
</article>
</Layout>
);
};

Write Preview
Loading…
Cancel
Save