Commit 9899c393ca4253f2d31fa840a2aa4733dc2dc99d
edit avatar names on profile pages
Ev Bogue committed on 6/29/2018, 12:04:37 AMParent: d89e5bb09b3a46bb3c18119673f03862020eb44c
Files changed
| style.css | changed |
| style.css.json | changed |
| views.js | changed |
| style.css | ||
|---|---|---|
| @@ -173,8 +173,9 @@ | ||
| 173 | 173 … | margin-right: .2em; |
| 174 | 174 … | } |
| 175 | 175 … | |
| 176 | 176 … | .avatar--medium img { |
| 177 … | + float: left; | |
| 177 | 178 … | vertical-align: top; |
| 178 | 179 … | width: 5em; |
| 179 | 180 … | height: 5em; |
| 180 | 181 … | margin-right: .5em; |
| @@ -256,8 +257,10 @@ | ||
| 256 | 257 … | button {margin: 0; margin-top: -.2em;} |
| 257 | 258 … | |
| 258 | 259 … | input {width: 88%; } |
| 259 | 260 … | |
| 261 … | +#profile input {width: 50%;} | |
| 262 … | + | |
| 260 | 263 … | .btn { |
| 261 | 264 … | display: inline-block; |
| 262 | 265 … | *display: inline; |
| 263 | 266 … | padding: 2px 6px; |
| style.css.json | ||
|---|---|---|
| @@ -1,1 +1,1 @@ | ||
| 1 | -"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n/*a {\n color: #00aaff;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #0088cc;\n text-decoration: underline;\n}*/\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\nimg {\n border-radius: 3px;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.avatar--medium img {\n vertical-align: top;\n width: 5em;\n height: 5em;\n margin-right: .5em;\n margin-bottom: .5em;\n}\n\n.compose, textarea, input {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n border: none;\n border-radius: 3px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.emoji {\n padding: .2em;\n}\n\n.right {\n float: right;\n}\n\n.emoji {\n *float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\ncode, pre {\n font-size: 12px;\n color: #ccc;\n}\n\ncode {\n color: #ccc;\n}\n\npre {\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 20px;\n}\n\nbutton {margin: 0; margin-top: -.2em;}\n\ninput {width: 88%; }\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n" | |
| 1 … | +"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n/*a {\n color: #00aaff;\n text-decoration: none;\n}\n\na:hover,\na:focus {\n color: #0088cc;\n text-decoration: underline;\n}*/\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\nimg {\n border-radius: 3px;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.avatar--medium img {\n float: left;\n vertical-align: top;\n width: 5em;\n height: 5em;\n margin-right: .5em;\n margin-bottom: .5em;\n}\n\n.compose, textarea, input {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n border: none;\n border-radius: 3px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.emoji {\n padding: .2em;\n}\n\n.right {\n float: right;\n}\n\n.emoji {\n *float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\ncode, pre {\n font-size: 12px;\n color: #ccc;\n}\n\ncode {\n color: #ccc;\n}\n\npre {\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 20px;\n}\n\nbutton {margin: 0; margin-top: -.2em;}\n\ninput {width: 88%; }\n\n#profile input {width: 50%;}\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n" | |
| views.js | |||
|---|---|---|---|
| @@ -139,26 +139,56 @@ | |||
| 139 | 139 … | screen.firstChild.insertBefore(profile, screen.firstChild.firstChild) | |
| 140 | 140 … | } else { | |
| 141 | 141 … | screen.firstChild.appendChild(profile) | |
| 142 | 142 … | } | |
| 143 … | + var name = avatar.name(src) | ||
| 143 | 144 … | ||
| 145 … | + var editname = h('span', | ||
| 146 … | + avatar.name(src), | ||
| 147 … | + h('button.btn', 'Edit', { | ||
| 148 … | + onclick: function () { | ||
| 149 … | + var nameput = h('input', {placeholder: name.textContent}) | ||
| 150 … | + var nameedit = | ||
| 151 … | + h('span', nameput, | ||
| 152 … | + h('button.btn', 'Preview', { | ||
| 153 … | + onclick: function () { | ||
| 154 … | + if (nameput.value[0] != '@') | ||
| 155 … | + tobename = nameput.value | ||
| 156 … | + else | ||
| 157 … | + tobename = nameput.value.substring(1, 100) | ||
| 158 … | + var newname = h('span', h('a', {href: '#' + src}, '@' + tobename), h('button.btn', 'Publish', { | ||
| 159 … | + onclick: function () { | ||
| 160 … | + var donename = h('span', h('a', {href: '#' + src}, '@' + tobename)) | ||
| 161 … | + sbot.publish({type: 'about', about: src, name: tobename}) | ||
| 162 … | + localStorage[src + 'name'] = tobename | ||
| 163 … | + newname.parentNode.replaceChild(donename, newname) | ||
| 164 … | + } | ||
| 165 … | + })) | ||
| 166 … | + nameedit.parentNode.replaceChild(newname, nameedit) | ||
| 167 … | + } | ||
| 168 … | + }) | ||
| 169 … | + ) | ||
| 170 … | + editname.parentNode.replaceChild(nameedit, editname) | ||
| 171 … | + } | ||
| 172 … | + }) | ||
| 173 … | + ) | ||
| 174 … | + | ||
| 144 | 175 … | var avatars = h('div.avatars', | |
| 145 | 176 … | h('a', {href: '#' + src}, | |
| 146 | 177 … | h('span.avatar--medium', avatar.image(src)), | |
| 147 | - avatar.name(src) | ||
| 178 … | + editname | ||
| 148 | 179 … | ) | |
| 149 | 180 … | ) | |
| 150 | 181 … | ||
| 151 | 182 … | pull( | |
| 152 | 183 … | sbot.userStream({id: src, reverse: false, limit: 1}), | |
| 153 | 184 … | pull.drain(function (msg) { | |
| 154 | - var howlong = h('span', ' arrived ', human(new Date(msg.value.timestamp))) | ||
| 185 … | + var howlong = h('span', h('br'), ' arrived ', human(new Date(msg.value.timestamp))) | ||
| 155 | 186 … | avatars.appendChild(howlong) | |
| 156 | 187 … | console.log(msg) | |
| 157 | 188 … | }) | |
| 158 | 189 … | ) | |
| 159 | 190 … | ||
| 160 | - var name = avatar.name(src) | ||
| 161 | 191 … | ||
| 162 | 192 … | var buttons = h('div.buttons') | |
| 163 | 193 … | ||
| 164 | 194 … | profile.firstChild.appendChild(avatars) | |
Built with git-ssb-web