before switching from sass to styled components

2021-10-02 20:07:16 +02:00
parent 0dbb7f8528
commit ad52fdb08f
20 changed files with 1041 additions and 90 deletions
@@ -0,0 +1 @@
+/* No CSS *//*# sourceMappingURL=Card.css.map */
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "",
+    "sources": [
+        "Card.sass"
+    ],
+    "names": [],
+    "file": "Card.css"
+}
@@ -0,0 +1,21 @@
+import React from 'react'
+import styled from 'styled-components'
+import { theme } from '../theme';
+const CardDiv = styled.div`
+flex-grow: 1;
+color: ${theme.color6};
+background: ${theme.color1};
+border-radius: 1em;
+padding: 1em;
+margin: 1em;
+h4 {
+    margin: 0;
+  }
+`;
+export default function Card({children}) {
+    return (
+        <CardDiv theme={theme}>
+            {children}
+        </CardDiv>
+    )
+}
@@ -0,0 +1,74 @@
+.main
+    &__card
+        flex-grow: 1
+        color: $color6
+        background: $color1
+        border-radius: 1em
+        padding: 1em
+        margin: 1em
+        h4
+            margin: 0
+        &__input
+            padding: 1em .2em .1em 0.2em
+            display: inline-block
+            flex-grow: 1
+            with: auto
+            z-index: 1
+            border: none
+            background: none
+            outline: none
+            font-size: 1em
+            &__box
+                font-size: 1.1em
+                overflow: hidden
+                position: relative
+                margin: 0.2em 0
+                display: flex
+                flex-direction: row
+                align-items: stretch
+                background: $color6
+                border-bottom: .3em solid $color5
+                &:hover
+                    border-bottom: .3em solid $color3
+                    outline: auto
+                >button
+                    position: relative
+                    background: $color2
+                    color: $color6
+                    border: none
+                    font-size: 0.8em
+                    font-weight: bold
+                    padding: 0 .5em
+                    transition: ease all 300ms
+                    z-index: 1
+                    &::before
+                        position: absolute
+                        display: block
+                        content: ''
+                        clip-path: polygon(0% 0%, 100% 100%, 0% 100%)
+                        transform: translateX(-90%) rotate(45deg)
+                        height: 1em
+                        width: 1em
+                        background: $color2
+                        transition: ease all 300ms
+                    &:hover
+                        background: $color3
+                        &::before
+                            background: $color3
+                            transform: translateX(-90%) rotate(45deg) scale(1.2)
+
+            &__label
+                padding: 0
+                color: $color2
+                z-index: 0
+                position: absolute
+                left: 0.2em
+                padding-bottom: 0.2em
+                bottom: 0
+                transition: all ease-in-out 350ms
+            &:focus + &__label, &:not(:placeholder-shown) + &__label
+                color: $color5
+                font-size: 0.7em
+                transform: translateY(0)
+                bottom: 50%
+                font-weight: bold
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import TextInput from './TextInput'
+export class CreateUserWidget extends Component {
+    render() {
+        return (
+            <div className="main__card">
+                <h4>Add User</h4>
+                <hr />
+                <p>Add new user</p>
+                <div className="main__card__input__box"><input id="main__card__input__box__0" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__0" className="main__card__input__label">First Name</label></div>
+                <div className="main__card__input__box"><input id="main__card__input__box__1" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__1" className="main__card__input__label">Last Name</label></div>
+                <div className="main__card__input__box"><input id="main__card__input__box__2" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__2" className="main__card__input__label">PIN</label></div>
+                <div className="main__card__input__box"><input id="main__card__input__box__3" placeholder=" " type="text" className="main__card__input"></input><label for="main__card__input__box__3" className="main__card__input__label">RFID</label><button>Scan</button></div>
+                <TextInput/>
+                <div className="main__card__input__box"><input id="main__card__input__box__4" placeholder=" " type="date" className="main__card__input"></input><label for="main__card__input__box__4" className="main__card__input__label">Expire Date</label></div>
+                <button>Add</button>
+            </div>
+        )
+    }
+}
+
+export default CreateUserWidget
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+
+export class RecentActivityWidget extends Component {
+    render() {
+        return (
+            <div className="main__card">
+            <h4>Recent Activity</h4>
+            <hr />
+            <table>
+                <thead>
+                    <tr>
+                        <td>Name</td>
+                        <td>Method</td>
+                        <td>Time</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Max Mustermann</td>
+                        <td>RFID</td>
+                        <td>1.10.2020 08:30</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        )
+    }
+}
+
+export default RecentActivityWidget
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import Card from './Card'
+export class SystemStatusWidget extends Component {
+    render() {
+        return (
+            <Card>
+                <h4>System Status</h4>
+                <hr />
+                <p>Uptime: since 3days 15hours</p>
+                <p>LastDB Update: before 7hours</p>
+                <p>Last administrator login: Admin (12.9.2021 09:30)</p>
+            </Card>
+        )
+    }
+}
+
+export default SystemStatusWidget
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import { theme } from '../theme'
+const InputWrapper = styled.div`
+font-size: 1.1em;
+overflow: hidden;
+position: relative;
+margin: 0.2em 0;
+display: -webkit-box;
+display: -ms-flexbox;
+display: flex;
+-webkit-box-orient: horizontal;
+-webkit-box-direction: normal;
+    -ms-flex-direction: row;
+        flex-direction: row;
+-webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+        align-items: stretch;
+background: #ddd9ebbf;
+border-bottom: 0.3em solid #490428c6;
+`;
+
+export class TextInput extends Component {
+    render() {
+        return (
+            <InputWrapper>
+                <input id="main__card__input__box__3" placeholder=" " type="text" className="main__card__input"></input>
+                <label for="main__card__input__box__3" className="main__card__input__label">RFID</label>
+                <button>Scan</button>
+            </InputWrapper>
+
+        )
+    }
+}
+
+export default TextInput
@@ -0,0 +1,4 @@
+import CreateUserWidget from "./CreateUserWidget";
+import RecentActivityWidget from "./RecentActivityWidget";
+import SystemStatusWidget from "./SystemStatusWidget";
+export { CreateUserWidget, RecentActivityWidget, SystemStatusWidget }
				`@@ -0,0 +1 @@`
				`/* No CSS //# sourceMappingURL=Card.css.map */`