albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Css tidy up

Browse source
This commit is contained in:
MrFry 2020-03-07 16:27:43 +01:00
parent d0a48513e9
commit 67b1fa2d37
18 changed files with 0 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/AllQuestions/AllQuestions.css
View file

@ -1,30 +0,0 @@
.subjectSelector {
overflow: scroll;
height: 200px;
margin: 10px;
}
.subjItem {
font-size: 18px;
padding: 3px;
cursor: pointer;
}
.activeSubjItem {
background-color: var(--text-color);
color: black;
}
.searchBar {
margin: 10px;
width: 100%;
color: white;
background-color: #212127;
border: none;
font-size: 18px;
}
.subjItem:hover:not(.activeSubjItem) {
background-color: #555;
color: white;
}

1
src/components/AllQuestions/AllQuestions.js
View file

@ -4,7 +4,6 @@ import LoadingIndicator from '../LoadingIndicator'
import Subject from '../../components/Subject'
import constants from '../../constants.json'
import './AllQuestions.css'
class AllQuestions extends PureComponent {
constructor (props) {

0
src/components/Feedback/Feedback.css
View file

1
src/components/Feedback/Feedback.js
View file

@ -1,5 +1,4 @@
import React, { PureComponent } from 'react'
import './Feedback.css'
class Feedback extends PureComponent {
render () {

3
src/components/HomeTab/HomeTab.css
View file

@ -1,3 +0,0 @@
.link {
margin: 10px;
}

1
src/components/HomeTab/HomeTab.js
View file

@ -1,5 +1,4 @@
import React, { PureComponent } from 'react'
import './HomeTab.css'
import links from './links.json'

10
src/components/LoadingIndicator/LoadingIndicator.css
View file

@ -1,10 +0,0 @@
.loadingindicator {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font-size: 30px;
}

1
src/components/LoadingIndicator/LoadingIndicator.js
View file

@ -1,5 +1,4 @@
import React, { PureComponent } from 'react'
import './LoadingIndicator.css'
class LoadingIndicator extends PureComponent {
render () {

0
src/components/Manual/Manual.css
View file

1
src/components/Manual/Manual.js
View file

@ -3,7 +3,6 @@ import React, { PureComponent } from 'react'
import LoadingIndicator from '../LoadingIndicator'
import constants from '../../constants.json'
import './Manual.css'
class Manual extends PureComponent {
constructor (props) {

22
src/components/Question/Question.css
View file

@ -1,22 +0,0 @@
.questionContainer {
margin: 10px;
}
.questionContainer:hover {
background-color: var(--hoover-color);
}
.question {
font-weight: bold;
font-size: 17px;
color: #ffffff;
}
.answer {
font-size: 15px;
}
.data {
font-size: 13px;
color: #a1a1a1;
}

1
src/components/Question/Question.js
View file

@ -1,5 +1,4 @@
import React, { PureComponent } from 'react'
import './Question.css'
class Question extends PureComponent {
render () {

0
src/components/Subject/Subject.css
View file

1
src/components/Subject/Subject.js
View file

@ -1,7 +1,6 @@
import React, { PureComponent } from 'react'
import Question from '../Question'
import './Subject.css'
class Subject extends PureComponent {
render () {

28
src/components/UserQuestions/UserQuestions.css
View file

@ -1,28 +0,0 @@
.uquestioncontainer {
margin: 5px;
}
.uquestioncontainer:hover {
background-color: var(--hoover-color);
}
.uquestionscontainer {
margin: 10px;
}
.uquestion {
font-weight: 'bold';
font-size: 16px;
color: #fff;
margin: 5px;
}
.uanswer {
margin: 5px;
}
.uquestionnumber {
color: #fff;
margin: 5px;
font-size: 20px;
}

1
src/components/UserQuestions/UserQuestions.js
View file

@ -3,7 +3,6 @@ import React, { PureComponent } from 'react'
import LoadingIndicator from '../LoadingIndicator'
import constants from '../../constants.json'
import './UserQuestions.css'
class UserQuestions extends PureComponent {
constructor (props) {

118
src/pages/Home.css
View file

@ -1,118 +0,0 @@
body {
font: normal 14px Verdana;
color: #999999;
}
.link {
margin: 20px;
font-size: 20px;
}
.sidebarLink {
color: var(--text-color);
text-decoration: none;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #212127;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
color: var(--bright-color);
}
.sidebar a.active {
background-color: var(--text-color);
color: black;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
}
.menuicon div {
height: 5px;
background-color: var(--bright-color);
margin: 0px 0;
display: none;
width: 30px;
}
.sidebarheader {
font-size: 40px;
color: var(--bright-color);
display: flex;
text-align: center;
}
.headercontainer {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
position: relative;
margin: 10px;
}
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
@media screen and (max-width: 700px) {
.menuicon div {
display: block;
margin: 6px 0;
}
.sidebar a {
text-align: center;
float: none;
}
.menuicon {
display: inline;
}
.sidebaritemsconainer {
display: inline;
}
.sidebarheader {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.codecontainer {
margin-left: 0px;
margin-right: 0px;
}
.sitedescription {
width: 100%;
margin: 0 auto;
}
}

127
src/pages/Home.js
View file

@ -1,127 +0,0 @@
import React, { PureComponent } from 'react'
import AllQuestions from '../../components/AllQuestions'
import Manual from '../../components/Manual'
import HomeTab from '../../components/HomeTab'
import UserQuestions from '../../components/UserQuestions'
import Feedback from '../../components/Feedback'
import constants from '../../constants.json'
import './Home.css'
// TODO: css remove unnecesarry stuff
// TODO: home to separate component
// TODO: resizing test
// TODO: fetch data only once?
const tabs = {
home: {
text: 'Home',
component: HomeTab
},
allq: {
text: 'All questions',
component: AllQuestions
},
manual: {
text: 'Manual',
component: Manual
},
userq: {
text: 'User Questions',
component: UserQuestions
},
feedback: {
text: 'Feedback',
component: Feedback
}
}
class Home extends PureComponent {
constructor (props) {
super(props)
this.state = {
menuShowing: window.innerWidth > constants.mobileWindowWidth,
currentTab: 'home'
}
}
closeMenu () {
this.setState((oldState) => {
return {
menuShowing: !oldState.menuShowing
}
})
}
setActiveTab (name) {
this.setState({
currentTab: name
})
if (window.innerWidth < constants.mobileWindowWidth) {
this.setState({
menuShowing: false
})
}
}
renderSideBar () {
const { currentTab, menuShowing } = this.state
return (
<div className='sidebar'>
<div className='headercontainer'>
<span onClick={this.closeMenu.bind(this)} className='menuicon'>
<div />
<div />
<div />
</span>
<div className='sidebarheader' >
Frylabs
</div>
</div>
{
menuShowing
? <div className='sidebaritemsconainer'>
{Object.keys(tabs).map((key) => {
let tab = tabs[key]
return (
<a
key={key}
className={currentTab === key ? 'active' : ''}
href={'#' + key}
onClick={() => { this.setActiveTab(key) }}
>{tab.text}</a>
)
})}
</div>
: null
}
</div>
)
}
renderContents () {
const { currentTab } = this.state
let ContentComponent = tabs[currentTab].component
return (
<ContentComponent />
)
}
render () {
return (
<div>
{this.renderSideBar()}
<div className='content'>
{this.renderContents()}
</div>
</div>
)
}
}
export default Home