paweld/pas2js
1
0
Fork 0
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git synced 2025-04-14 09:09:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

* Some style improvements

Browse Source
This commit is contained in:
michael 2020-08-30 21:29:20 +00:00
parent 6fb1ce581f
commit e6ab1e7963
3 changed files with 42 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demo/webwidget/widgets/css/widgetsdemo.css
View File

@ -1,12 +1,7 @@
.banner {
background-color: var(--blue);
/*
background-size: 128px 40px;
background-repeat: no-repeat;
background-size: cover;*/
*/
color: white !important;
height: 50px;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#democontainer {
@ -43,4 +38,4 @@
.propGridNameCell {
border: dotted 1px #ccc;
padding: 5px;
}
}

BIN
demo/webwidget/widgets/images/freePascal.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

72
demo/webwidget/widgets/widgetsdemo.html
View File

@ -1,58 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<title>Web Widgets Demo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/widgetsdemo.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js" crossorigin="anonymous"></script>
<title>Webwidgets Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="webwidgetsdemo.js"></script>
</head>
<body>
<div class="banner container-fluid">
<h2 class="text-center">
<span "align-middle">WebWidgets demo</span>
</h2>
</div>
<div class="container-fluid"/>
<!-- navbar -->
<nav class="navbar navbar-dark bg-primary sticky-top">
<a class="navbar-brand" href="#">
<!-- <img src="images/freePascal.jpeg" height="30" class="d-inline-block align-top mr-2 " alt="" loading="lazy"> -->
<span class="font-weight-bold">Web Widgets Demo</span>
</a>
<img src="images/freePascal.jpeg" height="30" class="ml-auto d-inline-block align-top mr-2 " alt="" loading="lazy">
</nav>
<!-- end of navbar -->
<div class="container-fluid" />
<!-- toast -->
<div id="toastarea" aria-live="polite" aria-atomic="true" style="position: relative; top:0; right: 0; z-index: 99;">
<div id="toastarea-stack" style="position: absolute; top: 0; right: 0; z-index: 99;" data-ww-element-content="ww-1" >
</div>
</div>
<div class="row">
<div id="demoarea" class="col-10">
<div class="row">
<div id="demolist" class="col-2"></div>
<div id="democontainer" class="col-10"></div>
</div>
<div class="row">
<div class="col-2">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="showconsole" class="form-check-input" checked>Show pas2js console
</label>
</div>
</div>
</div>
<div class="row">
<div id="pasjsconsole" class="col-12 democonsole"></div>
</div>
<!-- end of toast -->
<div class="d-flex flex-column" style="height: 88vh;">
<div class="flex-fill mt-1 row h-100 overflow-auto" >
<!-- demo -->
<div id="demolist" class="col-auto h-100 overflow-auto"></div>
<div id="democontainer" class="col h-100 overflow-auto d-flex justify-content-center py-2"></div>
<div id="propertygrid" class="col-auto h-100 overflow-auto"></div>
<!-- end of demo -->
</div>
<div id="propertygrid" class="col-2">
<div class="mt-2 border bg-light" style="max-height: 30vh;">
<!-- console -->
<div class="form-check ml-2 my-2">
<label class="form-check-label">
<input type="checkbox" id="showconsole" class="form-check-input" checked>Show pas2js console
</label>
</div>
<div id="pasjsconsole" class="democonsole h-100 overflow-auto mb-2"></div>
<!-- end of console -->
</div>
</div>
</div>
<script>
<script>
window.addEventListener("load", rtl.run);
</script>
</body>