mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
Merge pull request #798 from shamsartem/feature-css-fix
Feature css fix
This commit is contained in:
Mark Nadal
GitHub
commit
9ac94db8b3
@ -1,156 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Converse</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
#converse {
|
||||
font-size: 16pt;
|
||||
}
|
||||
#converse .box {
|
||||
margin-bottom: 0.2em;
|
||||
padding: 1em;
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
#converse b:after {
|
||||
content: " ";
|
||||
}
|
||||
#converse li .when {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2em;
|
||||
padding: 0.5em 1em;
|
||||
background: rgba(100%,100%,100%,0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
#converse li:hover .when {
|
||||
opacity: 1;
|
||||
right: 0em;
|
||||
}
|
||||
.poiret {
|
||||
font-family: 'Poiret One', sans-serif;
|
||||
}
|
||||
.large {
|
||||
font-size: 200%;
|
||||
}
|
||||
#converse .what, #converse .who {
|
||||
cursor: text;
|
||||
outline: none;
|
||||
display: inline;
|
||||
min-width: 1em;
|
||||
padding-left: 1px;
|
||||
}
|
||||
[contentEditable=true]:empty:not(:focus):before{
|
||||
content:attr(data-text)
|
||||
}
|
||||
|
||||
#title {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
<head>
|
||||
<title>Converse</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
.chat__heading {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.say {
|
||||
margin: 0 0 0.4em 0.4em;
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
.chat__form-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#name-input {
|
||||
margin-top: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.chat__form {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
background-color: white;
|
||||
border: 2px solid white;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#message-input {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="converse" class="hue2 page">
|
||||
<div class="pad">
|
||||
<div id='title' class="poiret large rubric whitet">Have a Conversation...</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li class="none"></li>
|
||||
</ul>
|
||||
.chat__name-input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
<form class="white huet2 box">
|
||||
<div>
|
||||
<div class="say hue2 right whitet box act">say</div>
|
||||
<b id="name-input" class="jot left who" contenteditable="true" data-text="Name"></b>
|
||||
<p id="message-input" class="jot left what" contenteditable="true" data-text="Write a message..."></p>
|
||||
</div>
|
||||
</form>
|
||||
.chat__message-input {
|
||||
flex: 5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
<div class="model">
|
||||
<li class="white huet2 box">
|
||||
<b class="who"></b>
|
||||
<p class="what"></p>
|
||||
<span class="sort none">0</span>
|
||||
<div class="when"></div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.chat__submit {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
<script src="/jquery.js"></script>
|
||||
<script src="/gun.js"></script>
|
||||
<script src="/gun/nts.js"></script>
|
||||
<script>
|
||||
var gun = Gun(location.origin + '/gun');
|
||||
var chat = gun.get('converse/' + location.hash.slice(1));
|
||||
.chat__submit:hover::after {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
$("form .say").on('click', submit);
|
||||
$("form .what").on('keydown', enter);
|
||||
function enter(e){
|
||||
if(e.which !== 13){ return }
|
||||
submit(e);
|
||||
}
|
||||
function submit(e){
|
||||
e.preventDefault();
|
||||
.chat__submit:focus::after {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
var msg = {when: Gun.time.is()};
|
||||
.chat__submit::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
msg.who = $('form .who').text();
|
||||
if(!msg.who){
|
||||
msg.who = 'user' + Gun.text.random(3);
|
||||
$('form .who').text(msg.who);
|
||||
}
|
||||
.chat__message-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 60px 20px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
msg.what = $('form .what').text();
|
||||
if(!msg.what){ return }
|
||||
.chat__message {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
chat.set(msg);
|
||||
$('form .what').text('');
|
||||
}
|
||||
.chat__name {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
chat.map().val(function(msg, id){
|
||||
if(!msg){ return }
|
||||
var ul = $('ul');
|
||||
var last = sort(msg.when, ul.children('li').last());
|
||||
.chat__when {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2em;
|
||||
padding: 10px;
|
||||
background: rgba(100%, 100%, 100%, 0.9);
|
||||
opacity: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
var li = $("#msg-" + id)[0]; // grab if exists
|
||||
if(!li){
|
||||
li = $('.model li').clone(true) // else create it
|
||||
.attr('id', 'msg-' + id)
|
||||
.insertAfter(last);
|
||||
}
|
||||
.chat__message:hover .chat__when {
|
||||
opacity: 1;
|
||||
right: 0em;
|
||||
}
|
||||
|
||||
// bind the message data into the UI
|
||||
li = $(li);
|
||||
li.find('.who').text(msg.who);
|
||||
li.find('.what').text(msg.what);
|
||||
li.find('.sort').text(msg.when);
|
||||
@media (max-width: 567px) {
|
||||
.chat__heading {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
var time = new Date(msg.when);
|
||||
li.find('.when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
|
||||
<body>
|
||||
<div class="chat hue2 page">
|
||||
<h2 id='title' class="chat__heading hue2 whitet">Have a Conversation...</h2>
|
||||
<ul class="chat__message-list">
|
||||
<li class="none"></li>
|
||||
</ul>
|
||||
|
||||
$('html, body').stop(true, true)
|
||||
.animate({scrollTop: ul.height()});
|
||||
});
|
||||
<div class="chat__form-container hue2">
|
||||
<form class="chat__form">
|
||||
<label for="name-input" class="visually-hidden">Name</label>
|
||||
<input id="name-input" class="chat__name-input" placeholder="Name"></input>
|
||||
<label for="message-input" class="visually-hidden">Message</label>
|
||||
<input id="message-input" class="chat__message-input" placeholder="Write a message..."></input>
|
||||
<button class="chat__submit say hue2">say</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
function sort(num, li){ return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity)? li : sort(num, li.prev()) }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="model">
|
||||
<li class="chat__message white huet2 box">
|
||||
<b class="chat__name"></b>
|
||||
<p class="chat__message-text"></p>
|
||||
<span class="sort none">0</span>
|
||||
<div class="chat__when"></div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/jquery.js"></script>
|
||||
<script src="/gun.js"></script>
|
||||
<script src="/gun/nts.js"></script>
|
||||
<script>
|
||||
var gun = Gun(location.origin + '/gun');
|
||||
var chat = gun.get('converse/' + location.hash.slice(1));
|
||||
|
||||
$(".chat__submit").on('click', submit);
|
||||
$(".chat_form").on('keydown', enter);
|
||||
function enter(e) {
|
||||
if (e.which !== 13) { return }
|
||||
submit(e);
|
||||
}
|
||||
function submit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var msg = { when: Gun.time.is() };
|
||||
|
||||
msg.who = $('.chat__name-input').val();
|
||||
if (!msg.who) {
|
||||
msg.who = 'user' + Gun.text.random(3);
|
||||
$('.chat__name-input').val(msg.who);
|
||||
}
|
||||
|
||||
msg.what = $('.chat__message-input').val();
|
||||
if (!msg.what) { return }
|
||||
|
||||
chat.set(msg);
|
||||
$('.chat__message-input').val('').focus();
|
||||
}
|
||||
|
||||
chat.map().val(function (msg, id) {
|
||||
if (!msg) { return }
|
||||
var messageList = $('.chat__message-list');
|
||||
var last = sort(msg.when, messageList.children('li').last());
|
||||
|
||||
var li = $("#msg-" + id)[0]; // grab if exists
|
||||
if (!li) {
|
||||
li = $('.model li').clone(true) // else create it
|
||||
.attr('id', 'msg-' + id)
|
||||
.insertAfter(last);
|
||||
}
|
||||
|
||||
// bind the message data into the UI
|
||||
li = $(li);
|
||||
li.find('.chat__name').text(msg.who);
|
||||
li.find('.chat__message-text').text(msg.what);
|
||||
li.find('.sort').text(msg.when);
|
||||
|
||||
var time = new Date(msg.when);
|
||||
li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
|
||||
|
||||
$('html, body').stop(true, true)
|
||||
.animate({ scrollTop: messageList.height() });
|
||||
});
|
||||
|
||||
function sort(num, li) { return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) }
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -313,4 +313,15 @@ ul, li {
|
||||
} @keyframes joy {
|
||||
0% {background-position: 0 0;}
|
||||
100% {background-position: -2800px 0;}
|
||||
}
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
@ -1,83 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Think</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="think" class="hue page">
|
||||
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:300italic' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
#think {
|
||||
font-size: 24pt;
|
||||
font-size: 6vmin;
|
||||
font-family: 'Alegreya Sans', sans-serif;
|
||||
color: white;
|
||||
}
|
||||
#think li {
|
||||
width: 90%;
|
||||
margin-top: 0.3em;
|
||||
border-bottom: 1px dashed white;
|
||||
}
|
||||
#think .add {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
padding: 0.5em;
|
||||
font-family: Tahoma, arial;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#think ul, #think li {
|
||||
list-style-type: circle;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<div class="pad whitet" style="width: 75%;">
|
||||
<div style="margin-top: 2%;">
|
||||
<div class="rubric left center">Add a Thought...</div>
|
||||
<a href="#" class="right huet white act add">+</a>
|
||||
</div>
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script src="/jquery.js"></script>
|
||||
<script src="/gun.js"></script>
|
||||
<script src="/gun/nts.js"></script>
|
||||
<script>
|
||||
// Check out the interactive tutorial
|
||||
// for how to build a simplified version
|
||||
// of this example: https://scrimba.com/c/cW2Vsa
|
||||
var gun = Gun(location.origin+'/gun');
|
||||
var think = gun.get('think/' + location.hash.slice(1));
|
||||
var typing, throttle;
|
||||
$('.add').on('click', function(){
|
||||
$('<li>').attr('contenteditable', true).prependTo('ul');
|
||||
});
|
||||
$(document).on('keyup', "[contenteditable=true]", function(){
|
||||
var li = $(this), id = li.attr('id');
|
||||
if(!id){
|
||||
li.attr('id', id = Gun.text.random());
|
||||
}
|
||||
typing = id;
|
||||
clearTimeout(throttle);
|
||||
throttle = setTimeout(function(){
|
||||
think.get(id).put(li.text());
|
||||
typing = false;
|
||||
},10);
|
||||
});
|
||||
think.map().on(function(thought, id){
|
||||
var li = $('#'+id)[0] || $('<li>').attr('id', id).attr('contenteditable', true).prependTo('ul');
|
||||
if(thought){
|
||||
if(id === typing){ return }
|
||||
$(li).text(thought);
|
||||
} else {
|
||||
$(li).hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<title>Think</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:300italic' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
.thought {
|
||||
font-family: 'Alegreya Sans', sans-serif;
|
||||
}
|
||||
|
||||
.thought__heading {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.thought__form-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.thought__item {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.thought__input {
|
||||
flex: 1;
|
||||
font-family: 'Alegreya Sans', sans-serif;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.thought__add {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-family: Tahoma, arial;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.thought__add:hover::after {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.thought__add:focus::after {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.thought__add::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.thought__list {
|
||||
list-style-type: circle;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 90px 20px;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media (max-width: 567px) {
|
||||
.thought__heading {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="thought hue page">
|
||||
<div class="thought__form-container hue">
|
||||
<h2 id='title' class="thought__heading hue">Add a thought...</h2>
|
||||
<button class="thought__add say huet">
|
||||
<span aria-hidden="true">+</span>
|
||||
<span class="visually-hidden">Add thought</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="thought__list">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script src="/jquery.js"></script>
|
||||
<script src="/gun.js"></script>
|
||||
<script src="/gun/nts.js"></script>
|
||||
<script>
|
||||
// Check out the interactive tutorial
|
||||
// for how to build a simplified version
|
||||
// of this example: https://scrimba.com/c/cW2Vsa
|
||||
var gun = Gun(location.origin + '/gun');
|
||||
var think = gun.get('think/' + location.hash.slice(1));
|
||||
var thoughtItemStr = function(id) { return '<li class="thought__item"><label class="visually-hidden" for="' + id + '">Thought</label><input id="' + id + '" class="thought__input huet"><li/>'}
|
||||
var typing, throttle;
|
||||
$('.thought__add').on('click', function () {
|
||||
$(thoughtItemStr('')).prependTo('.thought__list').find('.thought__input').focus();
|
||||
});
|
||||
$(document).on('keyup', '.thought__input', function () {
|
||||
var input = $(this), id = input.attr('id');
|
||||
if (!id) {
|
||||
input.attr('id', id = Gun.text.random());
|
||||
}
|
||||
typing = id;
|
||||
clearTimeout(throttle);
|
||||
throttle = setTimeout(function () {
|
||||
think.get(id).put(input.val());
|
||||
typing = false;
|
||||
}, 10);
|
||||
});
|
||||
think.map().on(function (thought, id) {
|
||||
var li = $('#' + id).parent()[0] || $(thoughtItemStr(id)).prependTo('.thought__list');
|
||||
if (thought) {
|
||||
if (id === typing) { return }
|
||||
$(li).find('.thought__input').val(thought);
|
||||
} else {
|
||||
$(li).hide();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user