anglk/web-narrowcast
1
0
Fork 0
forked from varia/web-narrowcast
Code Issues Pull Requests Projects Releases Wiki Activity

interact.js file added to repo and linked to inxed script

Browse Source 
minor adjustments on style
This commit is contained in:
JoanaChicau 2021-03-06 16:27:50 +01:00
parent 343650fa94
commit ecf2cb4f10
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -76,13 +76,13 @@
--> -->
<p class="note">* you can move and resize the elements here by dragging their corners and side *</p> <p class="note"> * move and resize the elements above by dragging their corners and sides *</p>
</div> </div>
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined --> <!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script> <script src="interact.min.js"></script>
<!-- also found this other options: <!-- also found this other options:
https://www.webcomponents.org/element/jifalops/drag-resize https://www.webcomponents.org/element/jifalops/drag-resize
https://codepen.io/zz85/pen/gbOoVP --> https://codepen.io/zz85/pen/gbOoVP -->

3
interact.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

18
narrowstyle.css
View File

@ -76,12 +76,11 @@ a, button {
} }
.sidebar { .sidebar {
height: 100%; height: 100%;
padding: 1rem;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
box-shadow: 0.2rem -0.2rem 1rem #ffe4fd; box-shadow: 1rem 0rem 6rem #ffe4fd;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }
@ -100,7 +99,7 @@ a, button {
margin-left: 40px; margin-left: 40px;
} }
button.minimize{ button.minimize{
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd; box-shadow: 0.3rem 0.2rem 0.6rem #ffe4fd;
font-size: 1rem; font-size: 1rem;
width: 2rem; width: 2rem;
background-color: #393c56; background-color: #393c56;
@ -120,6 +119,7 @@ button.minimize{
overflow: -ms-autohiding-scrollbar; overflow: -ms-autohiding-scrollbar;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem 1rem;
} }
.sidetop { .sidetop {
height: 45vh; height: 45vh;
@ -136,13 +136,18 @@ button.minimize{
color: #ffe4fd; color: #ffe4fd;
margin-top: auto; margin-top: auto;
} }
.middle { .middle {
height: 10vh; height: 80px;
font-size: 0.8rem; font-size: 0.8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
box-shadow: -4rem 0.6rem 2rem #ffe4fd;
width: 100%;
padding: 0.5rem 1rem;
} }
.middle p{ .middle p{
margin: 0px; margin: 0px;
} }
@ -164,14 +169,15 @@ button.minimize{
.sidebottom { .sidebottom {
height: 45vh; height: 45vh;
} }
.sidebottom p { .sidebottom p {
margin: 0.25rem 0rem; margin: 0.25rem 0rem;
} }
.sidebottom a { .sidebottom a {
color: #aec7ea; color: #aec7ea;
} }
.sidebottom p:last-child {
padding-bottom: 2rem;
}
.live { .live {
margin-left: 300px; margin-left: 300px;
display: inline-block; display: inline-block;