Skip to content

Commit

Permalink
added some css effects
Browse files Browse the repository at this point in the history
  • Loading branch information
@lackdaz
lackdaz committed Jun 15, 2017
1 parent 5eec91c commit 251fa0c
Show file tree
Hide file tree
Showing 22 changed files with 268 additions and 1,785 deletions.
11 changes: 10 additions & 1 deletion app/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ class App extends Component {

this.state = {
link: '/',
opened: false,
};

this.handleLink = this.handleLink.bind(this);
this.toggleFloating = this.toggleFloating.bind(this);
}

componentWillMount() {
Expand All @@ -29,15 +31,20 @@ class App extends Component {
$('pre code').each((i, block) => {
hljs.highlightBlock(block);
});
window.scrollTo(0, 0)
}

handleLink(link) {
window.location.hash = link;
this.setState({ link });
}

toggleFloating({opened}) {
this.setState({ opened });
}

render() {
const { link } = this.state;
const { link, opened } = this.state;
console.log(link)
// If its true, landing page will trigger

Expand All @@ -56,6 +63,8 @@ class App extends Component {
<Docs
link={link}
handleLink={this.handleLink}
toggleFloating={this.toggleFloating}
opened={opened}
/>
);
}
Expand Down
10 changes: 10 additions & 0 deletions app/components/docs/Docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@ main {
padding: 10vh 10vw;
background-color: #F5F5F5;
height: 100vh;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}

.opened{
margin-left: 15vw;
padding: 10vh 10vw;
padding-right: 30vw;
}

main .main-container {
Expand Down
136 changes: 103 additions & 33 deletions app/components/docs/Docs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import TourCauses from '../../components/redirect/TourCauses'
import TourProject2 from '../../components/redirect/TourProject2'
import TourProject3 from '../../components/redirect/TourProject3'
import TourProject4 from '../../components/redirect/TourProject4'
import TourContact from '../../components/redirect/TourContact'

require('./Docs.css')

Expand All @@ -30,8 +31,12 @@ const Docs = (props) => {

return (
<div className='docs'>
<Sidebar handleLink={props.handleLink} />
<main>
<Sidebar
handleLink={props.handleLink}
float={props.opened}
/>

<main className={`${props.opened ? 'opened' : ''}`}>
{
link ? (
<div className='main-container'>
Expand All @@ -41,10 +46,13 @@ const Docs = (props) => {
/>
{ link.component }
<ChatBot
floating={true}
floating
handleLink={props.handleLink}
toggleFloating={props.toggleFloating}
botAvatar={'avatar.png'}
botDelay={500}
botDelay={2000}
customDelay={100}
opened={props.opened}
steps={[
{
id: '1',
Expand All @@ -59,9 +67,9 @@ const Docs = (props) => {
{
id: '3',
options: [
{ value: 'yes', label: 'Why not?', trigger: 'tour' },
{ value: 'no', label: 'Perhaps next time', trigger: 'menu' },
],
{ value: 'yes', label: 'Why not?', trigger: 'tour' },
{ value: 'no', label: 'Perhaps next time', trigger: 'menu' }
]
},
{
id: 'menu',
Expand All @@ -71,11 +79,11 @@ const Docs = (props) => {
{
id: 'menuInput',
options: [
{ value: '/about', label: 'Story', trigger: 'story' },
{ value: '/portfolio/project1', label: 'Portfolio', trigger: 'portfolio' },
{ value: '/skills', label: 'Skills', trigger: 'skills' },
{ value: 'contact', label: 'Contact', trigger: 'contact' },
],
{ value: '/about', label: 'Story', trigger: 'story' },
{ value: '/portfolio/project1', label: 'Portfolio', trigger: 'portfolio' },
{ value: '/skills', label: 'Skills', trigger: 'skills' },
{ value: 'contact', label: 'Contact', trigger: 'contact' }
]
},
{
id: 'tour',
Expand Down Expand Up @@ -128,9 +136,9 @@ const Docs = (props) => {
{
id: 'tour-about-ans',
options: [
{ value: 'yes', label: 'Ramble on', trigger: 'tour-causes-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' },
],
{ value: 'yes', label: 'Ramble on', trigger: 'tour-causes-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' }
]
},
{
id: 'tour-causes-1',
Expand Down Expand Up @@ -163,9 +171,9 @@ const Docs = (props) => {
{
id: 'tour-causes-ans',
options: [
{ value: 'yes', label: 'Wow, sure!', trigger: 'tour-project2-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' },
],
{ value: 'yes', label: 'Wow, sure!', trigger: 'tour-project2-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' }
]
},
{
id: 'tour-project2-1',
Expand All @@ -177,12 +185,12 @@ const Docs = (props) => {
},
{
id: 'tour-project2-2',
message: 'Alright, I made a web-controlled RFID lock, that\'s basically it',
message: 'Alright, I made a web-controlled RFID lock. That\'s basically it',
trigger: 'tour-project2-3'
},
{
id: 'tour-project2-3',
message: 'Well the great thing is that you could create users, save their access codes and authorize them for use. Fancy',
message: 'The great thing is that you could create users, save their access codes and authorize them for use. Fancy!',
trigger: 'tour-project2-4'
},
{
Expand All @@ -203,9 +211,9 @@ const Docs = (props) => {
{
id: 'tour-project2-ans',
options: [
{ value: 'yes', label: 'Wow, sure!', trigger: 'tour-project3-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' },
],
{ value: 'yes', label: 'Wow, sure!', trigger: 'tour-project3-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' }
]
},
{
id: 'tour-project3-1',
Expand Down Expand Up @@ -237,7 +245,7 @@ const Docs = (props) => {
},
{
id: 'tour-project3-6',
message: 'It could also track temperature and humidity and alert if the food was getting cold or soggy',
message: 'It could also track temperature and humidity, and alert if the food was getting cold or soggy',
trigger: 'tour-project3-last'
},
{
Expand All @@ -248,9 +256,9 @@ const Docs = (props) => {
{
id: 'tour-project3-ans',
options: [
{ value: 'yes', label: 'Wow, sure!', trigger: 'tour-project4-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' },
],
{ value: 'yes', label: 'Wow, sure!', trigger: 'tour-project4-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' }
]
},
{
id: 'tour-project4-1',
Expand Down Expand Up @@ -288,9 +296,9 @@ const Docs = (props) => {
{
id: 'tour-project4-ans',
options: [
{ value: 'yes', label: 'Yes, please', trigger: 'tour-skills-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' },
],
{ value: 'yes', label: 'Yes, please', trigger: 'tour-skills-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' }
]
},
{
id: 'tour-skills-1',
Expand All @@ -312,14 +320,74 @@ const Docs = (props) => {
},
{
id: 'tour-skills-4',
message: 'I try to keep knives sharp, so you\'ll see what I\'m currently learning',
trigger: 'tour-skills-last'
},
{
id: 'tour-skills-last',
message: 'Tell me when you\'re ready to continue',
trigger: 'tour-skills-ans'
},
{
id: 'tour-skills-ans',
options: [
{ value: 'yes', label: 'Yes', trigger: 'tour-contact-1' },
{ value: 'no', label: 'Stop', trigger: 'menu' }
]
},
{
id: 'tour-contact-1',
component: <TourContact />,
waitAction: true,
replace: true,
asMessage: false,
trigger: 'tour-contact-2'
},
{
id: 'tour-contact-2',
message: 'I try to keep knives sharp',
trigger: 'end'
trigger: 'tour-contact-3'
},
{
id: 'tour-contact-3',
message: 'Listed are my coding chops and creative contactets',
trigger: 'tour-contact-4'
},
{
id: 'tour-contact-4',
message: 'I try to keep knives sharp, so you\'ll see what I\'m currently learning',
trigger: 'tour-feedback-last'
},
{
id: 'tour-feedback-last',
message: 'We\'ve come to the end of the tour. Please rate your experience below. My master is watching',
trigger: 'tour-feedback-ans'
},
{
id: 'tour-feedback-ans',
options: [
{ value: 'awesome', label: 'Awesome!', trigger: 'tour-end' },
{ value: 'okay', label: 'Nubbad', trigger: 'tour-end' },
{ value: 'meh', label: 'Meh', trigger: 'tour-end' }
]
},
{
id: 'tour-end',
message: 'Is there anything else I can do for you?',
trigger: 'tour-end-ans'
},
{
id: 'tour-end-ans',
options: [
{ value: 'yes', label: 'Yes', trigger: 'menu' },
{ value: 'no', label: 'No', trigger: 'end' }
]
},
{
id: 'end',
message: 'Thank you so much for your time',
end: true
},
}

]}
/>
Expand All @@ -338,7 +406,9 @@ const Docs = (props) => {

Docs.propTypes = {
link: PropTypes.string.isRequired,
handleLink: PropTypes.func.isRequired
handleLink: PropTypes.func.isRequired,
toggleFloating: PropTypes.func,
opened: PropTypes.bool
}

export default Docs
12 changes: 12 additions & 0 deletions app/components/docs/layout/Sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@
border-right: 1px solid #e2e4e6;
overflow-y: scroll;
color: rgba(255, 255, 255, 1);
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}

.float{
width: 15vw;
}

.sidebar .sidebar-header {
Expand Down Expand Up @@ -190,6 +198,10 @@
transform: translateX(0);
}

/*.sidebar.opened.float{
width: 75%;
}*/

.sidebar .sidebar-close-button {
display: block;
}
Expand Down
11 changes: 8 additions & 3 deletions app/components/docs/layout/Sidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ class Sidebar extends Component {
super(props)

this.state = {
opened: false
opened: false,
float: false
}

this.renderSection = this.renderSection.bind(this)
Expand Down Expand Up @@ -84,14 +85,17 @@ class Sidebar extends Component {

render () {
const { opened } = this.state
const { float } = this.props

console.log(float)

return (
<div className='sidebar-container'>
<i
className='sidebar-toggle fa fa-bars'
onClick={() => this.toggleSidebar()}
/>
<div className={`sidebar ${opened ? 'opened' : ''}`}>
<div className={`sidebar ${opened ? 'opened' : ''} ${float ? 'float' : ''}`}>
<i
className='sidebar-close-button fa fa-close'
onClick={() => this.toggleSidebar()}
Expand Down Expand Up @@ -149,7 +153,8 @@ class Sidebar extends Component {
}

Sidebar.propTypes = {
handleLink: PropTypes.func.isRequired
handleLink: PropTypes.func.isRequired,
float: PropTypes.bool
}

export default Sidebar
9 changes: 0 additions & 9 deletions app/components/docs/pages/others/Contribute.jsx
View file

This file was deleted.

Loading

0 comments on commit 251fa0c

Please sign in to comment.