cyber-dream/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pers props app update

Browse Source
This commit is contained in:
cyber-dream 2023-05-07 04:24:46 +03:00
parent 9b88db9289
commit b8eda48aa7
3 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
resources/sys/personal-properties/personal-properies.css
View File

@ -22,7 +22,23 @@
width: 0; width: 0;
height: 0; height: 0;
} */ } */
.PersPropsContent{
width: 100%;
height: 100%;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding: 0px;
}
.PersPropsContent .PropsView{
/* background-color: rebeccapurple; */
width: 100%;
height: auto;
}
.PropertiesList{ .PropertiesList{
/* width: 100%; /* width: 100%;
height: auto; */ height: auto; */
@ -41,7 +57,7 @@
} }
.Personal-properties-bio{ .PropertiesList .ShortBio{
/* width: 100%; /* width: 100%;
height: auto; */ height: auto; */
/* margin-right: -20px; */ /* margin-right: -20px; */
@ -61,9 +77,7 @@
gap:15px; gap:15px;
} }
.ShortBio .Text{
.Personal-properties-textbio{
/* width: 100%; /* width: 100%;
height: auto; */ height: auto; */
@ -81,8 +95,14 @@
gap:1px; gap:1px;
} }
.ShortBio .Name{
font-family: "Virtue";
/* FIXME */
letter-spacing: 0.35px;
}
.Personal-properties-prop{
.PropertiesList .Island{
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid #888888; border: 1px solid #888888;
@ -97,11 +117,9 @@
gap:1px; */ gap:1px; */
} }
.Island .Title {
.Personal-properties-prop-title{
font-family: "Virtue"; font-family: "Virtue";
/* FIXME */
letter-spacing: 0.35px; letter-spacing: 0.35px;
position:relative; position:relative;
display: inline-block; display: inline-block;
@ -111,7 +129,11 @@
top: -9px; top: -9px;
} }
.Personal-properties-prop-content{ .Focused .Island .Title{
background-color: #CCCCCC;
}
.Island .Content{
width: 100%; width: 100%;
/* top: 0px; */ /* top: 0px; */
/* Auto layout */ /* Auto layout */
@ -122,7 +144,7 @@
gap: 12px; gap: 12px;
} }
.Personal-properties-prop-row{ .Island .Row{
margin-left: 12px; margin-left: 12px;
margin-right: 12px; margin-right: 12px;
/* Auto layout */ /* Auto layout */
@ -132,7 +154,7 @@
padding: 0px; padding: 0px;
gap: 5px; gap: 5px;
} }
.Personal-properties-prop-key{ .Island .Key{
position: relative; position: relative;
font-family: "Virtue"; font-family: "Virtue";
font-size: 11px; font-size: 11px;
@ -145,7 +167,7 @@
/* font-weight: bold; */ /* font-weight: bold; */
} }
.Personal-properties-prop-key-comments{ .Island .KeyComment{
/* color: rgb(129, 129, 129); TODO*/ /* color: rgb(129, 129, 129); TODO*/
color: #646464; color: #646464;
font-size: 9px; font-size: 9px;
@ -154,7 +176,8 @@
white-space:normal; white-space:normal;
/* filter: drop-shadow(-.5px -.5px 0px #616161); */ /* filter: drop-shadow(-.5px -.5px 0px #616161); */
} }
.Personal-properties-prop-values{
.Island .Values{
width: 55%; width: 55%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -164,7 +187,7 @@
} }
.Personal-properties-prop-value{ .Values .Value{
/* width: 55%; */ /* width: 55%; */
} }

2
resources/sys/personal-properties/personal-properties.js
View File

@ -23,7 +23,7 @@ class PersonalProperties{
newWindow.innerHTML = html newWindow.innerHTML = html
let scrollBar = new WdeScrollBar(newWindow.querySelector('.ScrollBarScrollElement'), newWindow.querySelector('.ScrollContent')) let scrollBar = new WdeScrollBar(newWindow.querySelector('.ScrollBarScrollElement'), newWindow.querySelector('.PropsView'))
newWindow.querySelector("#closeWindowButton").addEventListener('click', () => { newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
console.log("qewqweqweqweqwe") console.log("qewqweqweqweqwe")

29
templates/personal-properties/app.tmpl
View File

@ -7,37 +7,37 @@
</div> </div>
<div id="Drag" class="VisualDragArea"></div> <div id="Drag" class="VisualDragArea"></div>
</div> </div>
<div class="ContentBorder"> <div class="ContentBorder AdjectiveElement">
<div class="ScrollContent"> <div class="PersPropsContent">
<div class="PropsView">
<div class="PropertiesList"> <div class="PropertiesList">
<div class="Personal-properties-bio"> <div class="ShortBio">
<img src="/system/libs/img/get?path={{ .headerProps.IconPath }}" alt="My Photo" style="width: 48px;height: 48px;"> <img src="/system/libs/img/get?path={{ .headerProps.IconPath }}" alt="My Photo" style="width: 48px;height: 48px;">
<div class="Personal-properties-textbio"> <div class="Text">
{{ .headerProps.IconPath }} <div class="Name">{{ .headerProps.Name }}</div>
<div>{{ .headerProps.Name }}</div>
<div>{{ .headerProps.Info1 }}</div> <div>{{ .headerProps.Info1 }}</div>
<div>{{ .headerProps.Info2 }}</div> <div>{{ .headerProps.Info2 }}</div>
</div> </div>
</div> </div>
{{ range $propIsland := .allprops }} {{ range $propIsland := .allprops }}
<div id="prop" class="Personal-properties-prop"> <div class="Island">
<div class="Personal-properties-prop-title"> <div class="Title">
{{$propIsland.Header}}: {{$propIsland.Header}}:
</div> </div>
<div class="Personal-properties-prop-content"> <div class="Content">
{{range $prop := $propIsland.Props}} {{range $prop := $propIsland.Props}}
<div class="Personal-properties-prop-row"> <div class="Row">
<div class="Personal-properties-prop-key"> <div class="Key">
{{$prop.Key}}: {{$prop.Key}}:
{{ range $value := $prop.KeyComments }} {{ range $value := $prop.KeyComments }}
<div class="Personal-properties-prop-key-comments"> <div class="KeyComment">
{{ $value }} {{ $value }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="Personal-properties-prop-values"> <div class="Values">
{{ range $value := $prop.Values }} {{ range $value := $prop.Values }}
<div class="Personal-properties-prop-value"> <div class="Value">
{{ $value }} {{ $value }}
</div> </div>
{{ end }} {{ end }}
@ -51,6 +51,7 @@
</div> </div>
{{template "wde-widgets/scrollbar.tmpl" .}} {{template "wde-widgets/scrollbar.tmpl" .}}
</div> </div>
</div>
{{ end }} {{ end }}