Skip to content

Commit

Permalink
style(tng-dictionary): adjust grid height for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
jbambrick committed Feb 8, 2022
1 parent ff1d02f commit fd7fa5d
Show file tree
Hide file tree
Showing 9 changed files with 41 additions and 56 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
PORT=4200
8 changes: 3 additions & 5 deletions apps/tng-dictionary/src/components/Carousel/Carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,20 +50,18 @@ export function Carousel(props: CarouselProps) {
const currentItem: Term = props.data[currentIndex];

return (
<div style={{ height: '90vh', textAlign: 'center' }}>
<div style={{ height: '90vh' }}>
<Card className="Cards">
<CardContent>
<TermsDetailComponent termData={currentItem} />
<Divider />
<div style={{ textAlign: 'center', margin: '12px' }}>
<div style={{ paddingTop: '0px' }}>
{/*
<div style={{ margin: '12px' }}>
{/*
<ArrowBackIosNewOutlined sx={{ marginRight: '40px' }} fontSize='large' onClick={e => setIndex(cyclicDecrement(currentIndex, props.data.length - 1))} />
<ArrowForwardIosOutlinedIcon fontSize='large' onClick={e => setIndex(cyclicIncrement(currentIndex, props.data.length - 1))} />
<Button style={mobile} variant='outlined' onClick={e => setIndex(cyclicDecrement(currentIndex, props.data.length - 1))}><ArrowBackIosNewOutlinedIcon /> Back</Button>
<Button style={mobile} variant='outlined' onClick={e => setIndex(cyclicIncrement(currentIndex, props.data.length - 1))}>Next <ArrowForwardIosOutlinedIcon /></Button>
*/}
</div>
</div>
</CardContent>
</Card>
Expand Down
10 changes: 5 additions & 5 deletions apps/tng-dictionary/src/components/TermsDetail/TermsDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,15 @@ export function TermsDetailComponent(props: TermsDetailComponentProps) {

return (

<div style={{ textAlign: 'center' }}>
<div>

<Typography sx={{ mb: 1.5 }} variant='h4'>{term}</Typography>
{/* Don't add a div if there's no termEnglish */}
<Divider sx={{ mb: 1.5 }} />
<Typography sx={{ mb: 1.5 }} variant="h5">English Translation: {termEnglish ? termEnglish : ''}</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">{`contributor: ${contributor}`}</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">{`Term: ${id}`}</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary" variant='body2'>{`${audioURL}`}</Typography>
<Typography sx={{ mb: 1.5, textAlign: 'left' }} variant="h5">English: {termEnglish ? termEnglish : ''}</Typography>
<Typography sx={{ mb: 1.5, textAlign: 'left' }} color="text.secondary">{`contributor: ${contributor}`}</Typography>
<Typography sx={{ mb: 1.5, textAlign: 'left' }} color="text.secondary">{`Term: ${id}`}</Typography>
<Typography sx={{ mb: 1.5, textAlign: 'left' }} color="text.secondary" variant='body2'>{`${audioURL}`}</Typography>

<div>
{/* Don't render this if there is no valid source */}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
.tool {
vertical-align: sub;
}


4 changes: 2 additions & 2 deletions apps/tng-dictionary/src/components/Toolbar/Toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function Toolbar(props: ToolbarProps) {
>
<Link style={style} to={'/'}>
<h2>
<img style={{ marginRight: '14px', verticalAlign: 'sub' }} className='tool' src='https://api.tsilhqotinlanguage.ca/uploads/tng_log_for_language_hub_2e4ec30f17.png' height={40}></img>
<img style={{ marginRight: '14px', verticalAlign: 'middle' }} className='tool' src='https://api.tsilhqotinlanguage.ca/uploads/tng_log_for_language_hub_2e4ec30f17.png' height={40}></img>
Tŝilhqot'in Dictionary
</h2>
</Link>
Expand All @@ -45,5 +45,5 @@ export default Toolbar;

const style = {
textDecoration: 'none',
color: 'white'
color: 'white',
}
Original file line number Diff line number Diff line change
Expand Up @@ -110,14 +110,13 @@ export function VocabularyListDetail(props: VocabularyListDetailProps) {
<div style={center}>

<p>Vocabulary List: {id}</p>

<p>
{`${(appState.vocabularyList as unknown as HasIdAndName).id}: ${(appState.vocabularyList as unknown as HasIdAndName).name}`}
</p>
{/* TODO remove all casts */}
{/* TODO Complete form filtering feature */}
{/* <VocabularyListForm formItems={(appState.vocabularyList as unknown as any).variables} />*/}
<div style={{ margin: 'auto' }}><Carousel data={selectedTerms} /></div>
<div><Carousel data={selectedTerms} /></div>
</div >
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import Loading from '../Loading/Loading';
import './VocabularyListIndex.module.css';
import { purple } from '@mui/material/colors';
import { textAlign } from '@mui/system';
import { ClassNames } from '@emotion/react';
import { ThemeProvider, createTheme } from '@mui/material/styles';


Expand Down Expand Up @@ -48,7 +45,7 @@ export function VocabularyListIndex(props: VocabularyListIndexProps) {
field: 'id',
headerName: 'ID',
renderCell: (idParam: GridRenderCellParams<string>) => (
<Link to={`/vocabularyLists/${idParam.value}`}><p style={{ color: 'black' }}>{idParam.value}</p></Link>
<Link to={`/vocabularyLists/${idParam.value}`}><p style={{ color: 'red' }}>{idParam.value}</p></Link>
),
width: 150
}, {
Expand All @@ -65,7 +62,7 @@ export function VocabularyListIndex(props: VocabularyListIndexProps) {
<ThemeProvider theme={theme}>
<Typography style={center} className='body'>
<Typography style={style}>
<DataGrid rows={rows} columns={columns} pageSize={100} components={{ Toolbar: GridToolbar }} />
<DataGrid sx={height} rows={rows} columns={columns} pageSize={100} components={{ Toolbar: GridToolbar }} />
</Typography>
</Typography>
</ThemeProvider>
Expand All @@ -75,6 +72,13 @@ export function VocabularyListIndex(props: VocabularyListIndexProps) {

export default VocabularyListIndex;

const height = {
height: '80vh',
background: 'white',
}



const theme = createTheme({
palette: {
primary: {
Expand All @@ -91,7 +95,10 @@ const center = {
const style = {
height: '90vh',
width: 'fit-content',
background: 'white',
background: 'inherit',
backgroundRepeat: 'no-repeat',
backgroundAttachment: 'fixed',
backgroundPosition: 'center',
color: 'black',
textAlign: 'center',
display: 'inline-block'
Expand Down
46 changes: 14 additions & 32 deletions apps/tng-dictionary/src/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ min-height: calc(100vh - 80px);
display: inline-block;
}


.loading, .Logo {
position: absolute;
top: 50%;
Expand All @@ -56,42 +55,13 @@ a:-webkit-any-link {
cursor: pointer;
}

.Carousel {
text-align: center !important;
width: fit-content;
margin: auto;
padding: 20px;
}

.Arrow {
margin-right: 35px;
}

.body {
background-image: linear-gradient(45deg, rgb(222,20,20) 0%, rgb(222,20,20) 21%,rgb(190,25,25) 21%, rgb(190,25,25) 37%,rgb(158,30,30) 37%, rgb(158,30,30) 46%,rgb(126,35,35) 46%, rgb(126,35,35) 53%,rgb(103,39,39) 53%, rgb(103,39,39) 59%,rgb(97,44,44) 59%, rgb(97,44,44) 77%,rgb(92,30,30) 77%, rgb(92,30,30) 100%);
}

.body {
background-image: repeating-linear-gradient(45deg, rgba(255,255,255, 0.07) 0px, rgba(255,255,255, 0.07) 1px,transparent 1px, transparent 11px,rgba(255,255,255, 0.07) 11px, rgba(255,255,255, 0.07) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(90deg, rgba(255,255,255, 0.07) 0px, rgba(255,255,255, 0.07) 1px,transparent 1px, transparent 11px,rgba(255,255,255, 0.07) 11px, rgba(255,255,255, 0.07) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(0deg, rgba(255,255,255, 0.07) 0px, rgba(255,255,255, 0.07) 1px,transparent 1px, transparent 11px,rgba(255,255,255, 0.07) 11px, rgba(255,255,255, 0.07) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(135deg, rgba(255,255,255, 0.07) 0px, rgba(255,255,255, 0.07) 1px,transparent 1px, transparent 11px,rgba(255,255,255, 0.07) 11px, rgba(255,255,255, 0.07) 12px,transparent 12px, transparent 32px),linear-gradient(90deg, rgb(158,27,27),rgb(249,77,77));
}

.body {
background-image: radial-gradient(circle at 16% 83%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 50%,rgba(63, 63, 63,0.06) 50%, rgba(63, 63, 63,0.06) 100%),radial-gradient(circle at 68% 87%, rgba(66, 66, 66,0.06) 0%, rgba(66, 66, 66,0.06) 50%,rgba(105, 105, 105,0.06) 50%, rgba(105, 105, 105,0.06) 100%),radial-gradient(circle at 38% 50%, rgba(123, 123, 123,0.06) 0%, rgba(123, 123, 123,0.06) 50%,rgba(255,0,0, 0.06) 50%, rgba(255,0,0, 0.06) 100%),linear-gradient(90deg, rgb(149,9,9),rgb(149,9,9));
}
.body {
background-image: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, rgb(168,4,4),rgb(168,4,4));
}

.body {
background-image: radial-gradient(circle at 17% 77%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(197, 197, 197,0.04) 50%, rgba(197, 197, 197,0.04) 100%),radial-gradient(circle at 26% 17%, rgba(64, 64, 64,0.04) 0%, rgba(64, 64, 64,0.04) 50%,rgba(244, 244, 244,0.04) 50%, rgba(244, 244, 244,0.04) 100%),radial-gradient(circle at 44% 60%, rgba(177, 177, 177,0.04) 0%, rgba(177, 177, 177,0.04) 50%,rgba(187, 187, 187,0.04) 50%, rgba(187, 187, 187,0.04) 100%),linear-gradient(19deg, rgb(250,28,28),rgb(159,2,2));
}

.body {
background-image: radial-gradient(circle at 17% 77%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(197, 197, 197,0.04) 50%, rgba(197, 197, 197,0.04) 100%),radial-gradient(circle at 26% 17%, rgba(64, 64, 64,0.04) 0%, rgba(64, 64, 64,0.04) 50%,rgba(244, 244, 244,0.04) 50%, rgba(244, 244, 244,0.04) 100%),radial-gradient(circle at 44% 60%, rgba(177, 177, 177,0.04) 0%, rgba(177, 177, 177,0.04) 50%,rgba(187, 187, 187,0.04) 50%, rgba(187, 187, 187,0.04) 100%),linear-gradient(19deg, rgb(227,227,227),rgb(170,170,170));
}


.body {
overflow: auto;
background-image: radial-gradient(circle at 17% 77%, rgba(17, 17, 17, 0.37) 0%, rgba(17, 17, 17, 0.301) 50%,rgba(197, 197, 197,0.04) 50%, rgba(197, 197, 197,0.04) 100%),radial-gradient(circle at 26% 17%, rgba(64,64,64, 0.05) 0%, rgba(64, 64, 64, 0.24) 50%,rgba(244, 244, 244,0.04) 50%, rgba(244, 244, 244,0.04) 100%),radial-gradient(circle at 44% 60%, rgba(177, 177, 177, 0.185) 0%, rgba(177,177,177, 0) 50%,rgba(187, 187, 187,0.04) 50%, rgba(187, 187, 187, 0.11) 100%),linear-gradient(19deg, rgb(250,28,28),rgb(159,2,2));
}

Expand All @@ -103,12 +73,24 @@ a:-webkit-any-link {

@media only screen and (max-width: 700px) {
.Cards {
width: 80vw;
width: 90vw;
}
}

@media only screen and (max-width: 800px) {
.Cards {
width: 90vw;
}
}

@media only screen and (min-width: 800px) {
.Cards {
width: 50vw;
}
}

@media only screen and (min-width: 900px) {
.Cards {
width: 40vw;
}
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,4 @@
"ts-node": "~9.1.1",
"typescript": "~4.3.5"
}
}
}

0 comments on commit fd7fa5d

Please sign in to comment.