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

fixes in wde and persProperties

Browse Source
This commit is contained in:
cyber-dream 2023-03-18 05:16:32 +03:00
parent 04552cc3a9
commit c9fbbf09e2
7 changed files with 138 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
resources/base.css
View File

@ -33,17 +33,7 @@ body{
#WindowsLayer { #WindowsLayer {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: fixed;
}
.Application{
position: absolute;
/* background-color: antiquewhite; */
stroke: #000000;
stroke-width: 1px;
stroke-linecap: butt;
stroke-dasharray: 0;
} }
.Frame{ .Frame{
@ -81,10 +71,21 @@ body{
white-space: nowrap white-space: nowrap
} }
.VisualFrame{
width: 100%;
height: 100%;
overflow: scroll;
overflow-x: hidden;
background: #DDDDDD;
border: 1px solid #000000;
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px #FFFFFF;
}
.ContentFrame{ .ContentFrame{
box-sizing: border-box; box-sizing: border-box;
position: relative;
padding: 10px;
/* Auto layout */ /* Auto layout */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -92,12 +93,10 @@ body{
padding: 12px; padding: 12px;
gap:16px; gap:16px;
width: 100%; width: auto;
height: 100%; height: auto;
background: #DDDDDD;
border: 1px solid #000000;
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px #FFFFFF;
/* Inside auto layout */ /* Inside auto layout */
@ -105,6 +104,8 @@ body{
order: 0; order: 0;
align-self: stretch; align-self: stretch;
flex-grow: 1; flex-grow: 1;
/* overflow: scroll; */
} }
.Personal-properties-bio{ .Personal-properties-bio{
@ -141,30 +142,28 @@ body{
height: auto; height: auto;
border: 1px solid #888888; border: 1px solid #888888;
box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF; box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;
padding-bottom: 10px;
/* Auto layout */ /* Auto layout */
display: flex; /* display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0px; padding: 0px;
gap:1px; gap:1px; */
} }
.Personal-properties-prop-header{ .Personal-properties-prop-title{
font-family: "Virtue"; font-family: "Virtue";
letter-spacing: 0.35px; letter-spacing: 0.35px;
/* width: 50px; */
position:relative; position:relative;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
background-color: #DDDDDD; background-color: #DDDDDD;
/* left: 12px; */ left: 12px;
right: 39%;
top: -9px; top: -9px;
margin-left: 2px;
} }
.Personal-properties-prop-content{ .Personal-properties-prop-content{
@ -200,6 +199,16 @@ body{
/* font-weight: bold; */ /* font-weight: bold; */
} }
.Personal-properties-prop-key-comments{
/* color: rgb(129, 129, 129); TODO*/
color: #646464;
font-size: 9px;
font-style: italic;
text-align: end;
white-space:normal;
/* filter: drop-shadow(-.5px -.5px 0px #616161); */
}
.Personal-properties-prop-values{ .Personal-properties-prop-values{
width: 55%; width: 55%;
display: flex; display: flex;

8
resources/personal-properties/personal-properties.js
View File

@ -17,7 +17,7 @@ class PersonalProperties{
fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func
.then((response) => response.text()) .then((response) => response.text())
.then((html) => { .then((html) => {
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId) let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 350, 750) //TODO Get ~70% of user screen height
newWindow.innerHTML = html newWindow.innerHTML = html
@ -25,8 +25,10 @@ class PersonalProperties{
// console.log("keeek") // console.log("keeek")
// } // }
let closeButton = newWindow.children[0].children[0].children[0].children[0] // console.log(newWindow.children[0].children[0])
// closeButton.onclick = this.CloseWindow("test") let closeButton = newWindow.children[0].children[0]
// console.log(closeButton)
// // closeButton.onclick = this.CloseWindow("test")
closeButton.addEventListener('click', function (params) { closeButton.addEventListener('click', function (params) {
WebDesktopEnvironment.CloseWindow(newWindow) WebDesktopEnvironment.CloseWindow(newWindow)
}) })

24
resources/wde.js
View File

@ -42,16 +42,17 @@ class WebDesktopEnvironment{
/** /**
* @param {string} appId * @param {string} appId
* @param {string} windowName * @param {string} windowName
* @param {number} width
* @param {number} height
* @returns {HTMLElement} * @returns {HTMLElement}
*/ */
static CreateNewWindow(appId, windowName) { static CreateNewWindow(appId, windowName, width, height) {
let appElem = document.getElementById(`application-${appId}`) let appElem = document.getElementById(`application-${appId}`)
let newWindow = document.createElement("div")
let newWindow = document.createElement("window") newWindow.setAttribute("class", "StandartApplicationWindow")
newWindow.style.display = "inline" //TODO Make multi-window support
newWindow.style.position = "absolute" newWindow.style.position = "absolute"
newWindow.style.width = "350px" newWindow.style.width = width.toString() + "px"
newWindow.styleheight = "350px" newWindow.style.height = height.toString() + "px"
return appElem.appendChild(newWindow) return appElem.appendChild(newWindow)
} }
@ -137,8 +138,8 @@ class WindowsCompositor{
switch (true) { switch (true) {
case event.target.className == "WindowFrameTopBar": case event.target.className == "WindowFrameTopBar":
this.movingElement = event.target.parentElement.parentElement.parentElement this.movingElement = event.target.parentElement
console.log(this.movingElement) // console.log(this.movingElement)
break; break;
default: default:
break; break;
@ -150,9 +151,10 @@ class WindowsCompositor{
* @param {number} posX * @param {number} posX
* @param {number} posY * @param {number} posY
*/ */
dragElement(element, posX, posY) { dragElement(element, posX, posY) { //TODO
element.style.left = posX + "px"; console.log()
element.style.top = posY + "px"; element.style.left = (posX - element.clientWidth*0.5)+ "px";
element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
} }
} }

27
resources/wdeUI.css
View File

@ -1,3 +1,24 @@
.StandartApplicationWindow{
width: 100%;
min-height: 200px;
background-color: #CCCCCC;
border: 1px solid #000000;
box-shadow: 1px 1px 0px #000,
inset -1px -1px 0px rgba(0, 0, 0, 0.27),
inset 1px 1px 0px #FFFFFF;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px;
/* padding-bottom: 50px; */
gap:4px;
overflow: hidden;
}
.WindowFrameTopBarButton{ .WindowFrameTopBarButton{
width: 11px; width: 11px;
height: 11px; height: 11px;
@ -9,7 +30,7 @@
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
inset 1px 1px 0px rgba(255, 255, 255, 0.5), inset 1px 1px 0px rgba(255, 255, 255, 0.5),
inset -1px -1px 0px rgba(0, 0, 0, 0.27); inset -1px -1px 0px rgba(0, 0, 0, 0.27);
/* Inside auto layout */ /* Inside auto layout */
flex: none; flex: none;
order: 0; order: 0;
@ -17,13 +38,9 @@
} }
.WindowFrameTopBar{ .WindowFrameTopBar{
/* background-color: aqua; */
width: 100%; width: 100%;
height: 13px; height: 13px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

1
templates/base/index.tmpl
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<title>Greg Brzezinski</title>
<head> <head>
<link rel="stylesheet" type="text/css" href="res/base.css"> <link rel="stylesheet" type="text/css" href="res/base.css">
<link rel="stylesheet" type="text/css" href="res/wdeUI.css"> <link rel="stylesheet" type="text/css" href="res/wdeUI.css">

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

@ -1,49 +1,57 @@
{{ define "personal-properties/app.tmpl" }} {{ define "personal-properties/app.tmpl" }}
<div id="RootWidget" class="Application" style="width: 350px;height: 450px;" > <!-- <div id="WindowBorder" class="PersonalPropertiesFrame"> -->
<div id="WindowBorder" class="Frame">
<div id="TestWindowHeader" class="WindowFrameTopBar"> <div id="TestWindowHeader" class="WindowFrameTopBar">
<button id="closeWindowButton" class="WindowFrameTopBarButton" ></button> <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
<div id="Drag" class="WindowDragArea"></div> <div id="Drag" class="WindowDragArea"></div>
<div class="WindowFrameTitle"> <div class="WindowFrameTitle">
Test Title About me
</div> </div>
<div id="Drag" class="WindowDragArea"></div> <div id="Drag" class="WindowDragArea"></div>
<!-- <button class="WindowFrameTopBarButton" ></button> --> <!-- <button class="WindowFrameTopBarButton" ></button> -->
</div> </div>
<div id="ContentFrame" class="ContentFrame"> <div class="VisualFrame">
<div class="Personal-properties-bio"> <div id="ContentFrame" class="ContentFrame">
<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" style="width: 48px;height: 48px;"> <div class="Personal-properties-bio">
<div class="Personal-properties-textbio"> <img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
<div>{{ .Name }}</div> <div class="Personal-properties-textbio">
<div>{{ .BasicBio }}</div> <div>{{ .Name }}</div>
</div> <div>{{ .BasicBio }}</div>
</div>
{{ range $propIsland := .allprops }}
<div id="prop" class="Personal-properties-prop">
<div class="Personal-properties-prop-header">
{{$propIsland.Header}}:
</div>
<div class="Personal-properties-prop-content">
{{range $prop := $propIsland.Props}}
<div class="Personal-properties-prop-row">
<div class="Personal-properties-prop-key">{{$prop.Key}}:</div>
<div class="Personal-properties-prop-values">
{{ range $value := $prop.Values }}
<div class="Personal-properties-prop-value">
{{ $value }}
</div>
{{ end }}
</div>
</div> </div>
{{ end }}
</div> </div>
</div> {{ range $propIsland := .allprops }}
<div id="prop" class="Personal-properties-prop">
<div class="Personal-properties-prop-title">
{{$propIsland.Header}}:
</div>
<div class="Personal-properties-prop-content">
{{range $prop := $propIsland.Props}}
<div class="Personal-properties-prop-row">
<div class="Personal-properties-prop-key">
{{$prop.Key}}:
{{ range $value := $prop.KeyComments }}
<div class="Personal-properties-prop-key-comments">
{{ $value }}
</div>
{{ end }}
</div>
<div class="Personal-properties-prop-values">
{{ range $value := $prop.Values }}
<div class="Personal-properties-prop-value">
{{ $value }}
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
{{ end }}
</div>
{{ end }} </div>
</div> <!-- </div> -->
</div>
</div>
{{ end }} {{ end }}

49
websiteapp/personalprops/personalprops.go
View File

@ -62,28 +62,19 @@ func (p *PersonalPropertiesApp) Render() gin.H {
Header: "Education", Header: "Education",
Props: []PropElement{ Props: []PropElement{
{ {
Key: "Gymnasium 526", Key: "Gymnasium 526",
Values: []string{ KeyComments: []string{"2005-2015"},
"2005-2015", Values: []string{"Extended natural sciences course", "Additional C++, media production and computer graphics courses", "Winner of conference “The future of a strong Russia is in high technology” in programming section"},
"Extended natural sciences course",
"Additional C++, media production and computer graphics courses",
"Winner of conference “The future of a strong Russia is in high technology” in programming section",
},
}, },
{ {
Key: "Lyceum 281", Key: "Lyceum 281",
Values: []string{ KeyComments: []string{"2015-2016"},
"2015-2016", Values: []string{"Extended IT and Physical sciences course"},
"Extended IT and Physical sciences course",
},
}, },
{ {
Key: "University", Key: "University",
Values: []string{ KeyComments: []string{"2017-2019"},
"2017-2019", Values: []string{"Faculty: Info-communication Networks and Systems", "Specialty: Information Security"},
"Faculty: Info-communication Networks and Systems",
"Specialty: Information Security",
},
}, },
}, },
} }
@ -91,16 +82,19 @@ func (p *PersonalPropertiesApp) Render() gin.H {
Header: "Career", Header: "Career",
Props: []PropElement{ Props: []PropElement{
{ {
Key: "VR lab assistant", Key: "VR lab assistant",
Values: []string{"February 2019 - March 2020", "Teaching lessons for students in Unreal Engine 4, Unity and Blender editor courses", "Training students for World Skills Russia"}, KeyComments: []string{"Academy of Digital Technologies", "2019-2020"},
Values: []string{"Teaching lessons for students in Unreal Engine 4, Unity and Blender editor courses", "Training students for World Skills Russia"},
}, },
{ {
Key: "3d artist", Key: "3d artist",
Values: []string{"March 2020 - June 2020", "Creating 3d assets for VR game"}, KeyComments: []string{"Space Time VR", "2020-2020"},
Values: []string{"Creating 3d assets for VR game"},
}, },
{ {
Key: "Jr. Techartist", Key: "Jr. Techartist",
Values: []string{"Game content integration and production", "Shader coding", "Optimization asset production in artists pipeline"}, KeyComments: []string{"MP Games"},
Values: []string{"Game content integration and production", "Shader coding", "Optimization asset production in artists pipeline"},
}, },
{ {
Key: "Techartist", Key: "Techartist",
@ -116,7 +110,7 @@ func (p *PersonalPropertiesApp) Render() gin.H {
Values: []string{ Values: []string{
"Help unite fragmented community on one social platform", "Help unite fragmented community on one social platform",
"Worked on social elements of official site, create ranking", "Worked on social elements of official site, create ranking",
"took a part on creating ranking system for players", "Took a part on creating ranking system for players",
"Creating models and maps for Steam Workshop"}, "Creating models and maps for Steam Workshop"},
}, },
{ {
@ -152,8 +146,9 @@ type Book struct {
} }
type PropElement struct { type PropElement struct {
Key string Key string
Values []string KeyComments []string
Values []string
} }
type PropIsland struct { type PropIsland struct {