andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Enhance line

Browse source
This commit is contained in:
Schmelczer András 2020-01-09 09:45:22 +01:00
parent aa0906405c
commit b1fd2f372f
9 changed files with 96 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

59
.idea/workspace.xml generated
View file

@ -2,26 +2,16 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/framework/helper/animations/animations.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/index.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/cache.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/animations.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/random.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/polyfills.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/polyfills.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper/animations.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/animations/animations.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/fonts.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@ -43,6 +33,11 @@
<component name="ProjectLevelVcsManager" settingsEditedManually="true">
<ConfirmationsSetting value="2" id="Add" />
</component>
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showExcludedFiles" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">
<property name="ASKED_ADD_EXTERNAL_FILES" value="true" />
<property name="DefaultHtmlFileTemplate" value="HTML File" />
@ -56,33 +51,33 @@
<property name="nodejs_package_manager_path" value="npm" />
<property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
<property name="run.code.analysis.last.selected.profile" value="pProject Default" />
<property name="settings.editor.selected.configurable" value="watcher.settings" />
<property name="settings.editor.selected.configurable" value="preferences.updates" />
<property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/framework/helper" />
<recent name="$PROJECT_DIR$/src/framework/primitives/implementations" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/framework/helper/animations" />
<recent name="$PROJECT_DIR$/src/framework/helper" />
<recent name="$PROJECT_DIR$/src/framework/primitives/implementations" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
<component name="ServiceViewManager">
<option name="viewStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
<serviceView>
<treeState>
<expand />
<select />
</treeState>
</serviceView>
</list>
</option>
</component>
@ -127,7 +122,9 @@
<workItem from="1578383579118" duration="5883000" />
<workItem from="1578391423465" duration="34000" />
<workItem from="1578392333248" duration="21735000" />
<workItem from="1578472848376" duration="13628000" />
<workItem from="1578472848376" duration="13670000" />
<workItem from="1578556192921" duration="3098000" />
<workItem from="1578559306201" duration="30000" />
</task>
<servers />
</component>

9
src/framework/helper/animations/animations.scss Normal file
View file

@ -0,0 +1,9 @@
html[animations='off'] {
&,
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}

0
src/framework/helper/animations.ts → src/framework/helper/animations/animations.ts
View file

2
src/framework/index.scss Normal file
View file

@ -0,0 +1,2 @@
@import 'primitives/primitives';
@import 'helper/animations/animations';

2
src/page/theme-switcher/theme-switcher.ts
View file

@ -11,7 +11,7 @@ import { EventBroadcaster } from '../../framework/event-broadcaster';
import {
turnOffAnimations,
turnOnAnimations,
} from '../../framework/helper/animations';
} from '../../framework/helper/animations/animations';
export class PageThemeSwitcher extends PageElement {
private static readonly LOCAL_STORAGE_KEY = 'dark-mode';

3
src/page/timeline/timeline-element/timeline-element.html.ts
View file

@ -9,7 +9,8 @@ export const generate = (
showLess: string
): html => `
<section class="timeline-element">
<div class="line">
<div class="line-container">
<div class="line"></div>
<p class="date">${date}</p>
</div>
<div class="card">

93
src/page/timeline/timeline-element/timeline-element.scss
View file

@ -1,33 +1,66 @@
@import '../../../style/mixins';
@import '../../../style/vars';
@mixin q-dependent-line-container($vars, $q) {
.line {
height: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
&:before {
height: calc(100% - #{$q} - #{map_get($vars, $icon-size)} / 2);
}
&:after {
top: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
}
}
.date {
top: calc(#{$q} - 0.5ch);
}
}
@include responsive() using ($vars) {
.timeline-element {
display: flex;
width: map_get($vars, $body-width);
margin: auto;
.line {
.line-container {
position: relative;
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
@include q-dependent-line-container($vars, 33%);
min-width: 160px;
&:before {
content: '';
@include square(map_get($vars, $icon-size));
box-sizing: content-box;
position: absolute;
left: calc(
-0.5 * #{map_get($vars, $icon-size)} -
(1.5 * #{map_get($vars, $line-width)})
);
border: map_get($vars, $line-width) solid map_get($vars, $accent-color);
border-radius: 100%;
background: map_get($vars, $background);
.line {
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
}
&:after {
content: '';
@include square(map_get($vars, $icon-size));
border-radius: 1000px;
border: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
position: absolute;
left: -1 * map_get($vars, $icon-size) / 2 +
map_get($vars, $line-width) / 2;
}
}
.date {
@include special-text-font($vars);
position: absolute;
transform-origin: left center;
transform: rotate(30deg)
translateX(map_get($vars, $icon-size) / 2 + 6px) translateY(-10%);
padding-right: map_get($vars, $normal-margin);
}
}
@ -35,42 +68,20 @@
&:not(:first-of-type) .card {
margin-top: map_get($vars, $large-margin);
}
.line {
&:before {
top: calc(33% - #{map_get($vars, $icon-size)} / 2);
}
.date {
position: relative;
top: calc(33% + #{map_get($vars, $icon-size)} / 2 + 1ch);
transform: rotate(30deg);
margin: 0 map_get($vars, $normal-margin) 0
calc(#{map_get($vars, $line-width)} + 1ex);
width: 100px;
}
}
}
@include on-small-screen {
flex-direction: column;
align-items: center;
&:before {
top: calc(50% - #{map_get($vars, $icon-size)} / 2);
}
.line {
@include center-children();
justify-content: flex-start;
.line-container {
@include q-dependent-line-container($vars, 50%);
height: 150px;
width: 50%;
.date {
margin-left: calc(
#{map_get($vars, $icon-size)} / 2 + #{map_get($vars, $small-margin)}
);
width: 200px;
transform: translateX(map_get($vars, $icon-size) / 2 + 12px)
translateY(-10%);
}
}
}

12
src/styles.scss
View file

@ -1,7 +1,7 @@
@import 'style/vars';
@import 'style/mixins';
@import 'style/a';
@import 'framework/primitives/primitives';
@import 'framework/index';
@include responsive() using ($vars) {
& {
@ -13,16 +13,6 @@
@include on-small-screen {
font-size: 0.8em;
}
&[animations='off'] {
&,
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}
}
body {

2
webpack.config.js
View file

@ -16,7 +16,7 @@ module.exports = {
},
devServer: {
host: '0.0.0.0',
disableHostCheck: true,
// disableHostCheck: true,
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],