yolokube/dashboard
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Switched from Flex to Grids, general cleanup

Browse source
This commit is contained in:
Bastian Meissner 2020-05-20 21:10:00 +02:00
parent 1bcd8d5309
commit 9499641162
9 changed files with 192 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.js
View file

@ -7,8 +7,8 @@ import AppList from './components/appList'
import BookmarkList from './components/bookmarkList'
import SettingsModal from './components/settingsModal'
import themeData from './components/data/themes.json';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
import getTheme from './components/themeManager';
const selectedTheme = getTheme();
const GlobalStyle = createGlobalStyle`
body {

89
src/components/appList.js
View file

@ -4,90 +4,69 @@ import styled from 'styled-components';
import appData from './data/apps.json';
import themeData from './data/themes.json'
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
import getTheme from './themeManager';
const AppListContainer = styled.div`
padding: 2rem 0 2rem 0;
`;
import { Headline, ListContainer, ItemList, Item } from './elements'
const AppsContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
@media (max-width: 600px) {
flex-direction: column;
}
`;
const AppContainer = styled.div`
display: flex;
flex-direction: row;
flex: 1 0 21%;
padding: 1rem 0 1rem 0;
@media (max-width: 750px) {
flex: 1 0 42%;
}
`;
const selectedTheme = getTheme();
const IconContainer = styled.div`
margin-right: 5px;
margin-right: 0.5vh;
`;
const AppDetails = styled.div`
const DetailsContainer = styled.div`
display: flex;
flex-direction: column;
`;
const ApplicationsText = styled.h3`
font-family: Roboto, sans-serif;
font-weight: 900;
text-transform: uppercase;
margin: 0px;
font-size: 20px;
color: ${selectedTheme.mainColor};
`;
const Link = styled.a`
font-family: Roboto, sans-serif;
flex: 1 0 auto;
color: ${selectedTheme.mainColor};
font-weight: 500;
text-transform: uppercase;
margin: 0px;
margin: 0;
text-decoration: none;
font-size: 15px;
font-size: 1rem;
`;
const Description = styled.p`
font-family: Roboto, sans-serif;
text-transform: uppercase;
margin: 0px;
font-size: 10px;
margin: 0;
font-size: 0.65rem;
font-weight: 400;
color: ${selectedTheme.accentColor};
`;
const App = styled.div`
display: flex;
flex-basis: 25%;
padding: 1rem;
`;
const appList = () => (
<AppListContainer>
<ApplicationsText>Applications</ApplicationsText>
<AppsContainer>
<ListContainer>
<Headline>Applications</Headline>
<ItemList>
{
appData.apps.map((app) => (
<AppContainer>
<IconContainer>
<MaterialIcon icon={app.icon} color={selectedTheme.mainColor}/>
</IconContainer>
<AppDetails>
<Link href={app.URL}>{app.name}</Link>
<Description>{app.displayURL}</Description>
</AppDetails>
</AppContainer>
appData.apps.map((app, index) => (
<Item key={app.name + index}>
<App>
<IconContainer>
<MaterialIcon icon={app.icon} color={selectedTheme.mainColor} />
</IconContainer>
<DetailsContainer>
<Link href={app.URL}>{app.name}</Link>
<Description>{app.displayURL}</Description>
</DetailsContainer>
</App>
</Item>
))
}
</AppsContainer>
</AppListContainer>
</ItemList>
</ListContainer>
);
export default appList;

68
src/components/bookmarkList.js
View file

@ -3,18 +3,12 @@ import styled from 'styled-components';
import bookmarkData from './data/bookmarks.json';
import themeData from './data/themes.json'
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
import getTheme from './themeManager';
import { Headline, ListContainer, ItemList, Item } from './elements'
const BookmarksText = styled.h3`
font-family: Roboto, sans-serif;
text-transform: uppercase;
margin: 0;
font-size: 20px;
color: ${selectedTheme.mainColor};
`;
const selectedTheme = getTheme();
const GroupText = styled.h4`
const Group = styled.h4`
font-family: Roboto, sans-serif;
font-weight: 700;
margin: 0;
@ -22,27 +16,11 @@ const GroupText = styled.h4`
color: ${selectedTheme.mainColor};
`;
const BookmarkListContainer = styled.div`
padding: 2rem 0 2rem 0;
`;
const BookmarksContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
@media (max-width: 600px) {
flex-direction: column;
}
`;
const BookmarkGroupContainer = styled.div`
const BookmarkGroup = styled.div`
display: flex;
flex-direction: column;
flex: 1 0 21%;
padding-top: 2rem;
font-size: 15px;
flex: 2 1 auto;
padding: 1rem 0 1rem 0;
`;
const Bookmark = styled.a`
@ -55,25 +33,25 @@ const Bookmark = styled.a`
`;
const bookmarkList = () => (
<BookmarkListContainer>
<BookmarksText>Bookmarks</BookmarksText>
<BookmarksContainer>
<ListContainer>
<Headline>Bookmarks</Headline>
<ItemList>
{
bookmarkData.groups.map((group) => (
<BookmarkGroupContainer>
<GroupText>{group.name}</GroupText>
{
group.items.map((link) => (
<Bookmark href={link.url}>{link.name}</Bookmark>
))
}
</BookmarkGroupContainer>
bookmarkData.groups.map((group, index) => (
<Item key={group.name + index}>
<BookmarkGroup>
<Group>{group.name}</Group>
{
group.items.map((link) => (
<Bookmark key={link.name} href={link.url}>{link.name}</Bookmark>
))
}
</BookmarkGroup>
</Item>
))
}
</BookmarksContainer>
</BookmarkListContainer>
</ItemList>
</ListContainer>
);
export default bookmarkList;

36
src/components/data/apps.json
View file

@ -2,56 +2,56 @@
"apps": [
{
"name": "PiHole",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "192.168.1.253",
"URL": "/admin/",
"icon": "vpn_lock"
},
{
"name": "Plex",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "app.plex.tv",
"URL": "https://app.plex.tv",
"icon": "tv"
},
{
"name": "NextCloud",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "phntxx.tech",
"URL": "https://phntxx.tech/cloud/",
"icon": "filter_drama"
},
{
"name": "Ghost",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "phntxx.tech",
"URL": "https://phntxx.tech/blog/",
"icon": "rss_feed"
},
{
"name": "Minecraft",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "phntxx.tech",
"URL": "https://phntxx.tech/minecraft/index.html",
"icon": "games"
},
{
"name": "pfSense",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "phntxx.tech",
"URL": "https://phntxx.tech:1111/",
"icon": "security"
},
{
"name": "ESXi",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "rhsttpba1.ur.de",
"URL": "https://rhsttpba1.ur.de",
"icon": "dns"
},
{
"name": "Tautulli",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "phntxx.tech",
"URL": "https://phntxx.tech/tautulli/",
"icon": "bar_chart"
},
{
"name": "Grafana",
"displayURL": "example.com",
"URL": "https://example.com",
"displayURL": "phntxx.tech",
"URL": "https://phntxx.tech/grafana/",
"icon": "show_chart"
}
]

124
src/components/data/bookmarks.json
View file

@ -1,53 +1,15 @@
{
"groups": [
{
"name": "Communicate",
"name": "Wikis",
"items": [
{
"name": "Discord",
"url": "https://example.com"
"name": "Wikipedia",
"url": "https://en.wikipedia.org/"
},
{
"name": "Gmail",
"url": "https://example.com"
},
{
"name": "Slack",
"url": "https://example.com"
}
]
},
{
"name": "Cloud",
"items": [
{
"name": "Box",
"url": "https://example.com"
},
{
"name": "Dropbox",
"url": "https://example.com"
},
{
"name": "Drive",
"url": "https://example.com"
}
]
},
{
"name": "Design",
"items": [
{
"name": "Awwwards",
"url": "https://example.com"
},
{
"name": "Dribbble",
"url": "https://example.com"
},
{
"name": "Muz.li",
"url": "https://example.com"
"name": "Arch Linux Wiki",
"url": "https://archlinux.org/"
}
]
},
@ -56,32 +18,15 @@
"items": [
{
"name": "Codepen",
"url": "https://example.com"
"url": "https://codepen.io/"
},
{
"name": "Devdocs",
"url": "https://example.com"
"name": "JSFiddle",
"url": "https://jsfiddle.net/"
},
{
"name": "Devhints",
"url": "https://example.com"
}
]
},
{
"name": "Lifestyle",
"items": [
{
"name": "Design Milk",
"url": "https://example.com"
},
{
"name": "Dwell",
"url": "https://example.com"
},
{
"name": "Freshome",
"url": "https://example.com"
"name": "Pastebin",
"url": "https://pastebin.com/"
}
]
},
@ -89,33 +34,46 @@
"name": "Media",
"items": [
{
"name": "Spotify",
"url": "https://example.com"
},
{
"name": "Trakt",
"url": "https://example.com"
"name": "Soundcloud",
"url": "https://soundcloud.com"
},
{
"name": "YouTube",
"url": "https://example.com"
"url": "https://youtube.com"
},
{
"name": "Twitch",
"url": "https://twitch.tv"
}
]
},
{
"name": "Reading",
"name": "Social Networks",
"items": [
{
"name": "Instapaper",
"url": "https://example.com"
"name": "Facebook",
"url": "https://facebook.com"
},
{
"name": "Medium",
"url": "https://example.com"
"name": "Twitter",
"url": "https://twitter.com"
},
{
"name": "Instagram",
"url": "https://instagram.com"
}
]
},
{
"name": "Imageboards",
"items": [
{
"name": "Reddit",
"url": "https://example.com"
"url": "https://reddit.com"
},
{
"name": "4chan",
"url": "https://4chan.org"
}
]
},
@ -123,16 +81,16 @@
"name": "Tech",
"items": [
{
"name": "TheNextWeb",
"url": "https://example.com"
"name": "Hackernoon",
"url": "https://hackernoon.com"
},
{
"name": "The Verge",
"url": "https://example.com"
"url": "https://theverge.com"
},
{
"name": "MIT Technology Review",
"url": "https://example.com"
"name": "Hackernews",
"url": "https://news.ycombinator.com"
}
]
}

34
src/components/elements.js Normal file
View file

@ -0,0 +1,34 @@
import styled from 'styled-components';
import getTheme from './themeManager';
const selectedTheme = getTheme();
const ListContainer = styled.div`
padding: 2rem 0 2rem 0;
`;
const Headline = styled.h3`
font-family: Roboto, sans-serif;
font-weight: 900;
text-transform: uppercase;
margin: 0px;
font-size: 1.5rem;
color: ${selectedTheme.mainColor};
`;
const ItemList = styled.ul`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1rem;
padding: 0;
list-style: none;
`;
const Item = styled.li`
max-height: 100px;
overflow: hidden;
position: relative;
list-style: none;
`;
export { Headline, ListContainer, ItemList, Item }

7
src/components/greeter.js
View file

@ -1,8 +1,8 @@
import React from 'react';
import styled from 'styled-components';
import themeData from './data/themes.json'
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
import getTheme from './themeManager';
const selectedTheme = getTheme();
const GreeterContainer = styled.div`
padding: 2rem 0 2rem 0;
@ -48,11 +48,8 @@ const getExtension = (day) => {
const getDateString = () => {
let currentDate = new Date();
const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
return weekDayNames[currentDate.getUTCDay()] + ", " + monthNames[currentDate.getUTCMonth()] + " " + currentDate.getDate() + getExtension(currentDate.getDate()) + " " + currentDate.getFullYear();
}

6
src/components/searchBar.js
View file

@ -3,8 +3,8 @@ import styled from 'styled-components';
import searchData from './data/search.json';
import themeData from './data/themes.json';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
import getTheme from './themeManager';
const selectedTheme = getTheme();
const SearchInput = styled.input`
width: 100%;
@ -47,8 +47,6 @@ const SearchBar = () => {
var query = input;
console.log(query)
if (query.split(" ")[0].includes("/")) {
handleQueryWithProvider(query)
} else {

72
src/components/settingsModal.js
View file

@ -8,12 +8,10 @@ import searchData from './data/search.json'
import themeData from './data/themes.json'
import getTheme, { setTheme } from './themeManager'
const selectedTheme = getTheme();
const ModalButton = styled.button`
float: right;
border: none;
background: none;
padding: 10px;
@ -21,7 +19,6 @@ const ModalButton = styled.button`
const ExitButton = styled.button`
float: right;
border: none;
background: none;
`;
@ -64,6 +61,27 @@ const Headline = styled.h3`
margin-top: 0;
`;
const Table = styled.table`
font-family: Roboto, sans-serif;
font-weight: 400;
background: none;
color: ${selectedTheme.mainColor};
`;
const TableRow = styled.tr`
border-bottom: 1px solid ${selectedTheme.mainColor};
`;
const TableCell = styled.td`
background: none;
padding-top: 0.5rem;
`;
const HeadCell = styled.th`
font-weight: 700;
background: none;
`;
const SelectorStyle = {
control: (provided) => ({
...provided,
@ -109,28 +127,6 @@ const SelectorStyle = {
}
}
const Table = styled.table`
font-family: Roboto, sans-serif;
font-weight: 400;
background: none;
color: ${selectedTheme.mainColor};
`;
const TableRow = styled.tr`
border-bottom: 1px solid ${selectedTheme.mainColor};
`;
const TableCell = styled.td`
background: none;
padding-top: 0.5rem;
`;
const HeadCell = styled.th`
font-weight: 700;
background: none;
`;
const SettingsModal = () => {
const [modalHidden, setModalHidden] = useState(true);
@ -153,18 +149,20 @@ const SettingsModal = () => {
</FormContainer>
</SelectContainer>
<Table>
<TableRow>
<HeadCell>Search Provider</HeadCell>
<HeadCell>Prefix</HeadCell>
</TableRow>
{
searchData.providers.map((provider) => (
<TableRow>
<TableCell>{provider.name}</TableCell>
<TableCell>{provider.prefix}</TableCell>
</TableRow>
))
}
<tbody>
<TableRow>
<HeadCell>Search Provider</HeadCell>
<HeadCell>Prefix</HeadCell>
</TableRow>
{
searchData.providers.map((provider, index) => (
<TableRow key={provider.name + index}>
<TableCell>{provider.name}</TableCell>
<TableCell>{provider.prefix}</TableCell>
</TableRow>
))
}
</tbody>
</Table>
</Modal>
</>