lots of style changes

This commit is contained in:
Ryan Peters 2021-07-21 12:43:14 -04:00
parent 92559fd7df
commit 79c6f77a79
5 changed files with 47 additions and 16 deletions

View File

@ -17,7 +17,7 @@
type: 'css',
content: 'body {\n\tcolor: green;\n}'
}],
plugins: ['pen', 'ace']
plugins: ['ace']
});
</script>
@ -31,6 +31,5 @@
<link href="~/css/jotted/jotted.min.css" rel="stylesheet" />
}
<div id="editor"></div>
<div id="editor" class="jotted-theme-bin"></div>
<div id="users-list"></div>

View File

@ -13,14 +13,14 @@
</head>
<body>
<header class="container">
<nav class="navbar navbar-expand navbar-light justify-content-between">
<a class="navbar-brand" href="#">HTML 101</a>
<nav class="navbar navbar-expand navbar-dark justify-content-between">
<a class="navbar-brand text-white" href="#">HTML 101</a>
<form class="form-inline" action="">
<input type="text" class="form-control mr-sm-2" id="your-name-text" placeholder="Enter your name!" />
<input type="text" class="form-control" id="your-color-text" placeholder="Color?" />
</form>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<ul class="navbar-nav ml-auto text-white">
<li class="nav-item d-none d-md-block">
<div class="navbar-text font-italic" id="live-mode-status">
<div><strong>Live Mode Enabled</strong></div>
@ -35,11 +35,12 @@
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<div>
@RenderBody()
</main>
</div>
<footer class="container">
<div id="users-list" class="text-white">&nsbp;</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/extensions.js"></script>

View File

@ -1,5 +1,6 @@
html, body {
height: 100%;
background-color: #333;
}
#editor {
@ -10,10 +11,18 @@ textarea, .navbar-brand {
font-family: 'Roboto Mono', monospace;
}
footer {
padding:10px 0;
}
.navbar-brand {
font-size: 26px;
}
.ace_print-margin {
display: none;
}
#live-mode-status {
display: none;
font-size: 13px;
@ -31,8 +40,24 @@ textarea, .navbar-brand {
text-align: center;
}
.jotted-nav {
display: none !important;
}
.jotted-pane {
width: 50% !important;
padding-top: 0 !important;
}
.jotted-pane-css, .jotted-pane-html {
height: 50% !important;
}
.jotted-pane-css {
border-top: 1px solid #ccc !important;
}
#users-list {
color: #777;
font-size: 12px;
margin-top: 10px;
}

View File

@ -30,10 +30,19 @@
connection.invoke('SaveName', $yourNameText.val(), color);
};
let setHeight = function () {
var editorHeight = $(window).height() - $('header').outerHeight() - $('footer').outerHeight();
$('#editor').height(editorHeight - 2);
};
isLiveMode();
setHeight();
// events
$(window).on('hashchange', isLiveMode);
$(window).resize(setHeight);
$('#your-name-text, #your-color-text').doneTyping(sendName);
let isTeacher = window.location.hash === '#4ELQcUq7UnFGghAZCVr4Chr9JmtncigfkGu5WSf9';

View File

@ -1,4 +1 @@
// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.
// Write your JavaScript code.