Horhik/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add recent list and items design

Browse source
This commit is contained in:
horhik 2020-05-22 10:24:10 +03:00
parent f7ac7f14da
commit 10a079c811
8 changed files with 137 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
.idea/workspace.xml
View file

@ -11,9 +11,14 @@
</component>
<component name="ChangeListManager">
<list default="true" id="4b1db503-490b-4f06-812d-6b9b94d2764a" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/components/elements/homepage/recent-block.jsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/elements/homepage/recent-list.jsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/css/elements/recent-list.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/svg/github-icon.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/elements/recent-block.jsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/pages/homepage.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/homepage.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/css/basic.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/basic.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/css/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/fonts.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/when-module-doesnt-merge-your-pullrequest/figlet.js/Gruntfile.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/when-module-doesnt-merge-your-pullrequest/figlet.js/Gruntfile.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/when-module-doesnt-merge-your-pullrequest/figlet.js/examples/node/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/when-module-doesnt-merge-your-pullrequest/figlet.js/examples/node/app.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/when-module-doesnt-merge-your-pullrequest/figlet.js/examples/node/appSync.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/when-module-doesnt-merge-your-pullrequest/figlet.js/examples/node/appSync.js" afterDir="false" />
@ -90,6 +95,7 @@
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/components/elements/homepage" />
<recent name="$PROJECT_DIR$/src" />
<recent name="$PROJECT_DIR$/src/css" />
</key>
@ -109,7 +115,7 @@
<workItem from="1589253283370" duration="5339000" />
<workItem from="1589450996359" duration="6767000" />
<workItem from="1589583447607" duration="5148000" />
<workItem from="1590125952856" duration="1899000" />
<workItem from="1590125952856" duration="6069000" />
</task>
<servers />
</component>
@ -168,10 +174,10 @@
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="393" y="202" key="SettingsEditor/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1589189511639" />
<state x="534" y="-190" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590127355329">
<state x="526" y="-270" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590129811747">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="534" y="-190" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590127355329" />
<state x="526" y="-270" width="766" height="653" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590129811747" />
<state x="623" y="240" width="672" height="678" key="search.everywhere.popup" timestamp="1589453965331">
<screen x="0" y="0" width="1920" height="1080" />
</state>

21
src/components/elements/homepage/recent-block.jsx Normal file
View file

@ -0,0 +1,21 @@
import React from 'react'
import {connect} from 'react-redux'
/*
* props: {
* header,
* pos,
* link
*
* }
* */
const RecentBlock = props => {
return(
<a href="#test" className={`recent-block recent-block--${props.pos || 'right'}`}>
{props.header || 'no content loaded...'}
</a>
)
}
export default connect()(RecentBlock)

20
src/components/elements/homepage/recent-list.jsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react'
import {connect} from 'react-redux'
import RecentBlock from "./recent-block";
const Recent = props => {
return (
<section className={'recent'}>
<h1 className={'h1 recent-header'}>
Recent
</h1>
<ul className="recent-list">
<li>
<RecentBlock/>
</li>
</ul>
</section>
)
}
export default connect()(Recent)

1
src/components/elements/recent-block.jsx
View file

@ -1 +0,0 @@
import React from 'react'

2
src/components/pages/homepage.jsx
View file

@ -1,12 +1,14 @@
import React from 'react'
import Logo from "../elements/logo";
import PageLinks from "../elements/page-links";
import Recent from "../elements/homepage/recent-list";
const HomePage = () => {
return (
<div>
<Logo child={"O. George's site"}></Logo>
<PageLinks/>
<Recent/>
</div>
)
}

8
src/css/basic.scss
View file

@ -7,11 +7,17 @@ body {
padding: 0;
background-color: var(--background);
color: var(--foreground);
font-family: 'Ubuntu', sans-serif;
}
.h1{
font-family: 'Mononoki Bold', 'Fira Code SemiBold' ;
font-size: 2em;
}
.App {
}
@import "logo";
@import "elements/page-links";
@import "elements/page-links";
@import "elements/recent-list";

74
src/css/elements/recent-list.scss Normal file
View file

@ -0,0 +1,74 @@
.recent{
margin: 0 auto;
}
.recent-header{
text-align: center;
}
.recent-list{
list-style: none;
margin: 0;
padding: 0;
}
.recent-block{
text-decoration: none;
font-family: Mononoki, monospace;
font-size: 1.3em;
box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34);
background: var(--background);
border-radius: 10px;
display: flex;
align-items: center;
align-content: center;
width: max-content;
margin: 20px 0;
padding:10px 20px;
color: var(--cyan);
transition: 0.2s;
&--left{
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&::before {
content: '📜';
margin: 5px;
display: flex;
align-items: center;
align-content: center;
} margin-right: auto;
&:hover, &:focus{
padding-left: 40px;
}
&:active{
padding-left: 0;
}
}
&--right{
&::after {
content: url("../../../src/svg/github-icon.svg");
margin: 5px;
display: flex;
align-items: center;
align-content: center;
}
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-left: auto;
&:hover, &:focus{
padding-right: 40px;
}
&:active{
padding-right: 0;
}
}
}

3
src/svg/github-icon.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 0.541664C5.8175 0.541664 0 6.26167 0 13.3163C0 18.9616 3.7245 23.7488 8.88875 25.4367C9.53875 25.5569 9.77708 25.1615 9.77708 24.8224C9.77708 24.5191 9.76625 23.7153 9.76083 22.6503C6.14467 23.4206 5.382 20.9365 5.382 20.9365C4.7905 19.4621 3.93575 19.0678 3.93575 19.0678C2.75817 18.2758 4.02675 18.2921 4.02675 18.2921C5.33217 18.3809 6.01792 19.6083 6.01792 19.6083C7.17708 21.5616 9.061 20.9972 9.80417 20.6711C9.92117 19.8445 10.2559 19.2823 10.6275 18.9627C7.74042 18.6431 4.706 17.5446 4.706 12.6501C4.706 11.2558 5.20975 10.1162 6.04392 9.22242C5.89767 8.89958 5.45892 7.60067 6.15767 5.84133C6.15767 5.84133 7.24642 5.499 9.73267 7.15108C10.7727 6.86725 11.8777 6.72642 12.9827 6.71992C14.0877 6.72642 15.1927 6.86725 16.2327 7.15108C18.7027 5.499 19.7914 5.84133 19.7914 5.84133C20.4902 7.60067 20.0514 8.89958 19.9214 9.22242C20.7502 10.1162 21.2539 11.2558 21.2539 12.6501C21.2539 17.5576 18.2152 18.6377 15.3227 18.9518C15.7777 19.3353 16.2002 20.1186 16.2002 21.3157C16.2002 23.0252 16.1839 24.3988 16.1839 24.8138C16.1839 25.1485 16.4114 25.5483 17.0777 25.4204C22.2788 23.7434 26 18.9529 26 13.3163C26 6.26167 20.1793 0.541664 13 0.541664Z" fill="#6272A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB