From 7d1371ff4f3a33ab8a86db68f827a916f689b422 Mon Sep 17 00:00:00 2001
From: Matthias Feyll <matthias.feyll@stud.h-da.de>
Date: Mon, 16 Sep 2024 13:45:45 +0200
Subject: [PATCH] apply some styles to device page
---
.../src/components/view/device/device.scss | 39 +++++++++++++++++++
.../components/view/device/device.view.tsx | 31 +++++++--------
react-ui/src/style/fonts.scss | 7 ++--
3 files changed, 56 insertions(+), 21 deletions(-)
diff --git a/react-ui/src/components/view/device/device.scss b/react-ui/src/components/view/device/device.scss
index 826b7c293..d24b08084 100644
--- a/react-ui/src/components/view/device/device.scss
+++ b/react-ui/src/components/view/device/device.scss
@@ -10,4 +10,43 @@ tr:hover > td {
tr:nth-child(2n+1) > td {
background-color: lighten(map-get($theme-colors, primary) , 38%)
+}
+
+.c-box {
+ padding: 2em !important;
+ padding-top: 1em !important;
+
+}
+
+
+
+.border-right {
+ $border-padding: 2em;
+
+ border-right: 1px solid lighten(map-get($theme-colors, dark), 35%);
+ padding-right: $border-padding;
+
+ & ~ div {
+ padding-left: $border-padding;
+ }
+}
+
+.tab-links {
+ font-size: 1.5em;
+ text-decoration: none;
+ color: map-get($theme-colors, dark);
+
+ &:hover {
+ color: lighten(map-get($theme-colors, primary), 10%);
+ }
+
+ &:focus {
+ border: none !important;
+ color: lighten(map-get($theme-colors, primary), 10%);
+ }
+
+ &.active {
+ color: map-get($theme-colors, primary);
+ font-weight: 500;
+ }
}
\ No newline at end of file
diff --git a/react-ui/src/components/view/device/device.view.tsx b/react-ui/src/components/view/device/device.view.tsx
index 64a5cb93f..d4955d4b3 100644
--- a/react-ui/src/components/view/device/device.view.tsx
+++ b/react-ui/src/components/view/device/device.view.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
import { DeviceViewTabs, DeviceViewTabValues } from './deivce.view.tabs';
import './device.scss';
import { DeviceViewTable } from './device.view.table';
-import { useParams } from 'react-router-dom';
function DeviceView() {
const { t } = useTranslation('common');
@@ -15,37 +14,33 @@ function DeviceView() {
return (
<div className='m-4 pt-4'>
<Container className="bg-white rounded c-box" fluid>
- <Row className='my-2'>
- <Col sm={7}><h3 className='text-black-50'>{t('device.title')}</h3></Col>
- <Col sm={5}>
+ <Row>
+ <Col sm={7} className='border-right mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
+ <Col sm={5} className='mt-4'>
<Nav className='justify-content-around'>
- <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA)} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
- <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL)} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
+ <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
+ <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
</Nav>
</Col>
</Row>
- <Row>
+ <Row className='align-items-center'>
<Col sm={3}>
- <FloatingLabel
- controlId="device.search"
- label={t('device.search.placeholder')}
- className='p-0 mx-2'
- >
- <Form.Control type="text" placeholder="name@example.com" ref={searchRef} />
- </FloatingLabel>
+ <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
+ <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
+ </Form.Group>
</Col>
- <Col sm={{ span: 2, offset: 2 }}>
+ <Col sm={{ span: 2, offset: 2 }} className='border-right pt-2'>
<Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
</Col>
</Row>
- <Row className='mt-2'>
- <Col sm={7}>
+ <Row className='align-items-start'>
+ <Col sm={7} className='pt-2 border-right'>
{DeviceViewTable(searchRef)}
</Col>
- <Col sm={5} className='border-left border-primary'>
+ <Col sm={5} className='pt-2'>
{DeviceViewTabs(activeTab)}
</Col>
</Row>
diff --git a/react-ui/src/style/fonts.scss b/react-ui/src/style/fonts.scss
index b5f7ec4e6..c47d1a52f 100644
--- a/react-ui/src/style/fonts.scss
+++ b/react-ui/src/style/fonts.scss
@@ -1,8 +1,9 @@
@font-face {
- font-family: inter_font;
- src: url("./fonts/Inter.ttf");
+ font-family: Inter;
+ src: url("/fonts/Inter.ttf");
}
+
* {
- font-family: inter_font;
+ font-family: Inter;
}
\ No newline at end of file
--
GitLab