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 BookmarkList from './components/bookmarkList'
import SettingsModal from './components/settingsModal' import SettingsModal from './components/settingsModal'
import themeData from './components/data/themes.json'; import getTheme from './components/themeManager';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; const selectedTheme = getTheme();
const GlobalStyle = createGlobalStyle` const GlobalStyle = createGlobalStyle`
body { body {

91
src/components/appList.js
View file

@ -4,90 +4,69 @@ import styled from 'styled-components';
import appData from './data/apps.json'; import appData from './data/apps.json';
import themeData from './data/themes.json' import getTheme from './themeManager';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0];
const AppListContainer = styled.div` import { Headline, ListContainer, ItemList, Item } from './elements'
padding: 2rem 0 2rem 0;
`;
const AppsContainer = styled.div` const selectedTheme = getTheme();
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 IconContainer = styled.div` const IconContainer = styled.div`
margin-right: 5px; margin-right: 0.5vh;
`; `;
const AppDetails = styled.div` const DetailsContainer = styled.div`
display: flex; display: flex;
flex-direction: column; 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` const Link = styled.a`
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
flex: 1 0 auto;
color: ${selectedTheme.mainColor}; color: ${selectedTheme.mainColor};
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
margin: 0px; margin: 0;
text-decoration: none; text-decoration: none;
font-size: 15px; font-size: 1rem;
`; `;
const Description = styled.p` const Description = styled.p`
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
text-transform: uppercase; text-transform: uppercase;
margin: 0px; margin: 0;
font-size: 10px; font-size: 0.65rem;
font-weight: 400; font-weight: 400;
color: ${selectedTheme.accentColor}; color: ${selectedTheme.accentColor};
`; `;
const App = styled.div`
display: flex;
flex-basis: 25%;
padding: 1rem;
`;
const appList = () => ( const appList = () => (
<AppListContainer> <ListContainer>
<ApplicationsText>Applications</ApplicationsText> <Headline>Applications</Headline>
<AppsContainer> <ItemList>
{ {
appData.apps.map((app) => ( appData.apps.map((app, index) => (
<AppContainer> <Item key={app.name + index}>
<IconContainer> <App>
<MaterialIcon icon={app.icon} color={selectedTheme.mainColor}/> <IconContainer>
</IconContainer> <MaterialIcon icon={app.icon} color={selectedTheme.mainColor} />
<AppDetails> </IconContainer>
<Link href={app.URL}>{app.name}</Link> <DetailsContainer>
<Description>{app.displayURL}</Description> <Link href={app.URL}>{app.name}</Link>
</AppDetails> <Description>{app.displayURL}</Description>
</AppContainer> </DetailsContainer>
</App>
</Item>
)) ))
} }
</AppsContainer> </ItemList>
</AppListContainer> </ListContainer>
); );
export default appList; 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 bookmarkData from './data/bookmarks.json';
import themeData from './data/themes.json' import getTheme from './themeManager';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; import { Headline, ListContainer, ItemList, Item } from './elements'
const BookmarksText = styled.h3` const selectedTheme = getTheme();
font-family: Roboto, sans-serif;
text-transform: uppercase;
margin: 0;
font-size: 20px;
color: ${selectedTheme.mainColor};
`;
const GroupText = styled.h4` const Group = styled.h4`
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
@ -22,27 +16,11 @@ const GroupText = styled.h4`
color: ${selectedTheme.mainColor}; color: ${selectedTheme.mainColor};
`; `;
const BookmarkListContainer = styled.div` const BookmarkGroup = 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`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 0 21%; flex: 2 1 auto;
padding-top: 2rem; padding: 1rem 0 1rem 0;
font-size: 15px;
`; `;
const Bookmark = styled.a` const Bookmark = styled.a`
@ -55,25 +33,25 @@ const Bookmark = styled.a`
`; `;
const bookmarkList = () => ( const bookmarkList = () => (
<BookmarkListContainer> <ListContainer>
<BookmarksText>Bookmarks</BookmarksText> <Headline>Bookmarks</Headline>
<BookmarksContainer> <ItemList>
{ {
bookmarkData.groups.map((group) => ( bookmarkData.groups.map((group, index) => (
<BookmarkGroupContainer> <Item key={group.name + index}>
<GroupText>{group.name}</GroupText> <BookmarkGroup>
{ <Group>{group.name}</Group>
group.items.map((link) => ( {
<Bookmark href={link.url}>{link.name}</Bookmark> group.items.map((link) => (
)) <Bookmark key={link.name} href={link.url}>{link.name}</Bookmark>
} ))
</BookmarkGroupContainer> }
</BookmarkGroup>
</Item>
)) ))
} }
</ItemList>
</BookmarksContainer> </ListContainer>
</BookmarkListContainer>
); );
export default bookmarkList; export default bookmarkList;

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

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

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

@ -1,53 +1,15 @@
{ {
"groups": [ "groups": [
{ {
"name": "Communicate", "name": "Wikis",
"items": [ "items": [
{ {
"name": "Discord", "name": "Wikipedia",
"url": "https://example.com" "url": "https://en.wikipedia.org/"
}, },
{ {
"name": "Gmail", "name": "Arch Linux Wiki",
"url": "https://example.com" "url": "https://archlinux.org/"
},
{
"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"
} }
] ]
}, },
@ -56,32 +18,15 @@
"items": [ "items": [
{ {
"name": "Codepen", "name": "Codepen",
"url": "https://example.com" "url": "https://codepen.io/"
}, },
{ {
"name": "Devdocs", "name": "JSFiddle",
"url": "https://example.com" "url": "https://jsfiddle.net/"
}, },
{ {
"name": "Devhints", "name": "Pastebin",
"url": "https://example.com" "url": "https://pastebin.com/"
}
]
},
{
"name": "Lifestyle",
"items": [
{
"name": "Design Milk",
"url": "https://example.com"
},
{
"name": "Dwell",
"url": "https://example.com"
},
{
"name": "Freshome",
"url": "https://example.com"
} }
] ]
}, },
@ -89,33 +34,46 @@
"name": "Media", "name": "Media",
"items": [ "items": [
{ {
"name": "Spotify", "name": "Soundcloud",
"url": "https://example.com" "url": "https://soundcloud.com"
},
{
"name": "Trakt",
"url": "https://example.com"
}, },
{ {
"name": "YouTube", "name": "YouTube",
"url": "https://example.com" "url": "https://youtube.com"
},
{
"name": "Twitch",
"url": "https://twitch.tv"
} }
] ]
}, },
{ {
"name": "Reading", "name": "Social Networks",
"items": [ "items": [
{ {
"name": "Instapaper", "name": "Facebook",
"url": "https://example.com" "url": "https://facebook.com"
}, },
{ {
"name": "Medium", "name": "Twitter",
"url": "https://example.com" "url": "https://twitter.com"
}, },
{
"name": "Instagram",
"url": "https://instagram.com"
}
]
},
{
"name": "Imageboards",
"items": [
{ {
"name": "Reddit", "name": "Reddit",
"url": "https://example.com" "url": "https://reddit.com"
},
{
"name": "4chan",
"url": "https://4chan.org"
} }
] ]
}, },
@ -123,16 +81,16 @@
"name": "Tech", "name": "Tech",
"items": [ "items": [
{ {
"name": "TheNextWeb", "name": "Hackernoon",
"url": "https://example.com" "url": "https://hackernoon.com"
}, },
{ {
"name": "The Verge", "name": "The Verge",
"url": "https://example.com" "url": "https://theverge.com"
}, },
{ {
"name": "MIT Technology Review", "name": "Hackernews",
"url": "https://example.com" "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 React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import themeData from './data/themes.json' import getTheme from './themeManager';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; const selectedTheme = getTheme();
const GreeterContainer = styled.div` const GreeterContainer = styled.div`
padding: 2rem 0 2rem 0; padding: 2rem 0 2rem 0;
@ -48,11 +48,8 @@ const getExtension = (day) => {
const getDateString = () => { const getDateString = () => {
let currentDate = new Date(); let currentDate = new Date();
const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
return weekDayNames[currentDate.getUTCDay()] + ", " + monthNames[currentDate.getUTCMonth()] + " " + currentDate.getDate() + getExtension(currentDate.getDate()) + " " + currentDate.getFullYear(); 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 searchData from './data/search.json';
import themeData from './data/themes.json'; import getTheme from './themeManager';
const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; const selectedTheme = getTheme();
const SearchInput = styled.input` const SearchInput = styled.input`
width: 100%; width: 100%;
@ -47,8 +47,6 @@ const SearchBar = () => {
var query = input; var query = input;
console.log(query)
if (query.split(" ")[0].includes("/")) { if (query.split(" ")[0].includes("/")) {
handleQueryWithProvider(query) handleQueryWithProvider(query)
} else { } 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 themeData from './data/themes.json'
import getTheme, { setTheme } from './themeManager' import getTheme, { setTheme } from './themeManager'
const selectedTheme = getTheme(); const selectedTheme = getTheme();
const ModalButton = styled.button` const ModalButton = styled.button`
float: right; float: right;
border: none; border: none;
background: none; background: none;
padding: 10px; padding: 10px;
@ -21,7 +19,6 @@ const ModalButton = styled.button`
const ExitButton = styled.button` const ExitButton = styled.button`
float: right; float: right;
border: none; border: none;
background: none; background: none;
`; `;
@ -64,6 +61,27 @@ const Headline = styled.h3`
margin-top: 0; 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 = { const SelectorStyle = {
control: (provided) => ({ control: (provided) => ({
...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 SettingsModal = () => {
const [modalHidden, setModalHidden] = useState(true); const [modalHidden, setModalHidden] = useState(true);
@ -153,18 +149,20 @@ const SettingsModal = () => {
</FormContainer> </FormContainer>
</SelectContainer> </SelectContainer>
<Table> <Table>
<TableRow> <tbody>
<HeadCell>Search Provider</HeadCell> <TableRow>
<HeadCell>Prefix</HeadCell> <HeadCell>Search Provider</HeadCell>
</TableRow> <HeadCell>Prefix</HeadCell>
{ </TableRow>
searchData.providers.map((provider) => ( {
<TableRow> searchData.providers.map((provider, index) => (
<TableCell>{provider.name}</TableCell> <TableRow key={provider.name + index}>
<TableCell>{provider.prefix}</TableCell> <TableCell>{provider.name}</TableCell>
</TableRow> <TableCell>{provider.prefix}</TableCell>
)) </TableRow>
} ))
}
</tbody>
</Table> </Table>
</Modal> </Modal>
</> </>