style fixes, and dynamic less compilation

This commit is contained in:
ansuz 2017-06-26 14:32:37 +02:00
parent c364803406
commit 48ece55ed5
4 changed files with 37 additions and 22 deletions

View File

@ -35,8 +35,6 @@
overflow:hidden;
box-sizing: border-box;
}
/* We use !important here to override the 96% set to the element in DecorateToolbar.js
when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */
body #pad-iframe.fullscreen {
top: 0px;
height: 100%;
@ -45,8 +43,6 @@
top: 0px;
height: 100%;
}
</style>
</head>
<body>

View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/customize/main.css">
<link rel="stylesheet" href="./slide.css">
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/codemirror/lib/codemirror.js"></script>
@ -35,6 +34,8 @@
<script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
<script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
<script src="/bower_components/codemirror/addon/display/placeholder.js"></script>
<script data-bootload="inner.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
</head>
<body>
<div id="bar"></div>

1
www/slide/inner.js Normal file
View File

@ -0,0 +1 @@
define([ 'less!/slide/slide.less' ], function () {});

View File

@ -1,5 +1,5 @@
@import "../../customize.dist/src/less/variables.less";
@import "../../customize.dist/src/less/mixins.less";
@import "/customize/src/less/variables.less";
@import "/customize/src/less/mixins.less";
// used for slides
.viewportRatio (@x, @y, @p: 100) {
@ -158,12 +158,8 @@ body {
height: ~"calc(100vh - 2px)";
}
}
/*.slide-frame:first-child {
margin-top: ~"calc(((100vh - 56.25vw)/2))";
}*/
}
/* Slide position (present mode) */
div.modal, div#modal {
display: none;
@ -212,21 +208,15 @@ div.modal, div#modal {
white-space: nowrap;
.slide-frame {
overflow: hidden;
display: inline-block;
display: flex;
flex-flow: column !important;
box-sizing: border-box;
border: 1px solid;
white-space: normal;
vertical-align: middle;
/* center things as much as possible
margin-top: 50vh;
margin-bottom: 50vh;
transform: translateY(-50%);
*/
padding: 0.5em;
width: 100vw;
height: 56.25vw; // height:width ratio = 9/16 = .5625
@ -324,7 +314,6 @@ div#modal #content, #print {
margin: 0 auto;
padding-left: 0.3em;
}
// p, ul, ol { padding-left: 10%; }
img {
position: relative;
@ -364,7 +353,7 @@ div#modal #content, #print {
top: 15vh; bottom: 15vh;
left: 10vw; right: 10vw;
border: 1px solid black;
z-index: 10;
z-index: 100000;
overflow: auto;
display: none;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
@ -396,3 +385,31 @@ div#modal #content, #print {
}
}
.slide-frame * {
max-width: 100%;
max-height: 100%;
}
p {
display: flex;
flex-flow: column;
padding: 0;
margin: 0;
min-height:0;
flex: 1;
}
media-tag {
min-height: 0;
flex: 1;
display: block;
text-align: center;
}
media-tag img {
max-height: 100% !important;
}
media-tag iframe {
min-height: 100%;
}