personal props html
This commit is contained in:
parent
f79c97ef95
commit
b62aee6811
@ -10,5 +10,115 @@ body{
|
|||||||
|
|
||||||
.Application{
|
.Application{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: antiquewhite;
|
/* background-color: antiquewhite; */
|
||||||
|
stroke: #000000;
|
||||||
|
stroke-width: 1px;
|
||||||
|
stroke-linecap: butt;
|
||||||
|
stroke-dasharray: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Frame{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 200px;
|
||||||
|
height: auto;
|
||||||
|
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;
|
||||||
|
gap:4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WindowFrameTopBar{
|
||||||
|
/* background-color: aqua; */
|
||||||
|
width: 100%;
|
||||||
|
height: 13px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WindowFrameTopBarButton
|
||||||
|
{
|
||||||
|
/* box-sizing: border-box; */
|
||||||
|
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
|
||||||
|
background: #D9D9D9;
|
||||||
|
border: 1px solid #222222;
|
||||||
|
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 rgba(0, 0, 0, 0.25), inset -1px -1px 0px #FFFFFF;
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WindowDragArea{
|
||||||
|
background-color: antiquewhite;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* background: repeating-linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgb(255, 255, 255) 0px,
|
||||||
|
rgb(255, 255, 255) 1px,
|
||||||
|
#ffffff00 2px,
|
||||||
|
#ffffff00 3px
|
||||||
|
); */
|
||||||
|
/* box-shadow: 1px 1px ; */
|
||||||
|
}
|
||||||
|
.ContentFrame{
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px;
|
||||||
|
gap:10px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
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 */
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Personal-properties-prop{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid #888888;
|
||||||
|
box-shadow: 1px 1px 0px #FFFFFF, inset 2px 2px 0px #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Personal-properties-prop-header{
|
||||||
|
/* width: 50px; */
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: #DDDDDD;
|
||||||
|
left: 12px;
|
||||||
|
top: -10px;
|
||||||
|
margin-left: 2px;
|
||||||
|
|
||||||
|
/* padding: 10px; */
|
||||||
|
/* border: 1px solid #888888; */
|
||||||
|
/* box-shadow: 1px 1px 0px #FFFFFF, inset 2px 2px 0px #FFFFFF; */
|
||||||
}
|
}
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<div id="Pizda" class="Application" style="width: 200px;height: 150px;">
|
|
||||||
<div id="TestWindowHeader" class="WindowDragArea" style="width: 100%;height: 22px; background-color: cornflowerblue;">
|
|
||||||
<button>Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
7
resources/personal-properties-prop.html
Normal file
7
resources/personal-properties-prop.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<div id="prop" class="personal-properties-prop">
|
||||||
|
{{ range $book := .books }}
|
||||||
|
<h1>{{ .Title }}</h1>
|
||||||
|
<h3>{{ .Author }}</h3>
|
||||||
|
<hr/>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
17
resources/personal-properties.html
Normal file
17
resources/personal-properties.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<div id="RootWidget" class="Application" style="width: 200px;height: 200px;">
|
||||||
|
<div id="WindowBorder" class="Frame">
|
||||||
|
<div id="TestWindowHeader" class="WindowFrameTopBar">
|
||||||
|
<button class="WindowFrameTopBarButton"></button>
|
||||||
|
<div id="Drag" class="WindowDragArea"></div>
|
||||||
|
<button class="WindowFrameTopBarButton" ></button>
|
||||||
|
</div>
|
||||||
|
<div id="ContentFrame" class="ContentFrame">
|
||||||
|
{{ range $book := .books }}
|
||||||
|
<div id="prop" class="Personal-properties-prop">
|
||||||
|
<div class="Personal-properties-prop-header">{{ .Title }}</div>
|
||||||
|
<div>{{ .Author }}</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
5
resources/personal-properties.js
Normal file
5
resources/personal-properties.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
class PersonalProperties {
|
||||||
|
constructor(){
|
||||||
|
console.log("pprops")
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user