mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-10 19:50:51 +02:00
Merge pull request #308 from jpsc/fix/button-anchor
fix(anchors): move anchors to buttons when more appropriate
This commit is contained in:
Kushagra Gour
GitHub
@ -1,5 +1,5 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { A } from './common';
|
||||
import { Button } from './common';
|
||||
|
||||
export default class Footer extends Component {
|
||||
constructor(props) {
|
||||
@ -15,8 +15,8 @@ export default class Footer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div id="footer" class="footer">
|
||||
<div class="footer__right fr">
|
||||
<a
|
||||
<div class="footer__right fr">
|
||||
<button
|
||||
onClick={this.props.saveHtmlBtnClickHandler}
|
||||
id="saveHtmlBtn"
|
||||
class="mode-btn hint--rounded hint--top-left hide-on-mobile"
|
||||
@ -25,7 +25,7 @@ export default class Footer extends Component {
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="codepen-logo" viewBox="0 0 120 120">
|
||||
<path
|
||||
@ -39,8 +39,7 @@ export default class Footer extends Component {
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<a
|
||||
href=""
|
||||
<button
|
||||
onClick={this.props.codepenBtnClickHandler}
|
||||
id="codepenBtn"
|
||||
class="mode-btn hint--rounded hint--top-left hide-on-mobile"
|
||||
@ -49,10 +48,9 @@ export default class Footer extends Component {
|
||||
<svg>
|
||||
<use xlinkHref="#codepen-logo" />
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<a
|
||||
href=""
|
||||
<button
|
||||
id="screenshotBtn"
|
||||
class="mode-btn hint--rounded hint--top-left show-when-extension"
|
||||
onClick={this.props.screenshotBtnClickHandler}
|
||||
@ -61,11 +59,11 @@ export default class Footer extends Component {
|
||||
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
|
||||
<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<div class="footer__separator hide-on-mobile" />
|
||||
|
||||
<a
|
||||
<button
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 1)}
|
||||
id="layoutBtn1"
|
||||
class="mode-btn hide-on-mobile"
|
||||
@ -73,8 +71,8 @@ export default class Footer extends Component {
|
||||
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
|
||||
<use xlinkHref="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 2)}
|
||||
id="layoutBtn2"
|
||||
class="mode-btn hide-on-mobile"
|
||||
@ -82,8 +80,8 @@ export default class Footer extends Component {
|
||||
<svg viewBox="0 0 100 100">
|
||||
<use xlinkHref="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 3)}
|
||||
id="layoutBtn3"
|
||||
class="mode-btn hide-on-mobile"
|
||||
@ -91,8 +89,8 @@ export default class Footer extends Component {
|
||||
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
|
||||
<use xlinkHref="#mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 5)}
|
||||
id="layoutBtn5"
|
||||
class="mode-btn hide-on-mobile"
|
||||
@ -100,8 +98,8 @@ export default class Footer extends Component {
|
||||
<svg viewBox="0 0 100 100">
|
||||
<use xlinkHref="#vertical-mode-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
onClick={this.layoutBtnClickhandler.bind(this, 4)}
|
||||
id="layoutBtn4"
|
||||
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
|
||||
@ -110,8 +108,8 @@ export default class Footer extends Component {
|
||||
<svg viewBox="0 0 100 100">
|
||||
<rect x="0" y="0" width="100" height="100" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
class="mode-btn hint--top-left hint--rounded hide-on-mobile"
|
||||
aria-label="Detach Preview"
|
||||
onClick={this.props.detachedPreviewBtnHandler}
|
||||
@ -119,11 +117,11 @@ export default class Footer extends Component {
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<div class="footer__separator" />
|
||||
|
||||
<a
|
||||
<button
|
||||
onClick={this.props.notificationsBtnClickHandler}
|
||||
id="notificationsBtn"
|
||||
class={`notifications-btn mode-btn hint--top-left hint--rounded ${
|
||||
@ -135,8 +133,8 @@ export default class Footer extends Component {
|
||||
<path d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z" />
|
||||
</svg>
|
||||
<span class="notifications-btn__dot" />
|
||||
</a>
|
||||
<A
|
||||
</button>
|
||||
<Button
|
||||
onClick={this.props.settingsBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="settingsBtnClick"
|
||||
@ -146,7 +144,7 @@ export default class Footer extends Component {
|
||||
<svg>
|
||||
<use xlinkHref="#settings-icon" />
|
||||
</svg>
|
||||
</A>
|
||||
</Button>
|
||||
</div>
|
||||
<a
|
||||
href="https://webmakerapp.com/"
|
||||
@ -157,7 +155,7 @@ export default class Footer extends Component {
|
||||
</a>
|
||||
©
|
||||
<span class="web-maker-with-tag">Web Maker</span>
|
||||
<A
|
||||
<Button
|
||||
onClick={this.props.helpBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="helpButtonClick"
|
||||
@ -170,12 +168,12 @@ export default class Footer extends Component {
|
||||
>
|
||||
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
|
||||
</svg>
|
||||
</A>
|
||||
<A
|
||||
</Button>
|
||||
<Button
|
||||
onClick={this.props.keyboardShortcutsBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="keyboardShortcutButtonClick"
|
||||
class="footer__link hint--rounded hint--top-right hide-on-mobile"
|
||||
class="footer__link hint--rounded hint--top-right hide-on-mobile"
|
||||
aria-label="Keyboard shortcuts"
|
||||
>
|
||||
<svg
|
||||
@ -187,7 +185,7 @@ export default class Footer extends Component {
|
||||
>
|
||||
<use xlinkHref="#keyboard-icon" />
|
||||
</svg>
|
||||
</A>
|
||||
</Button>
|
||||
<a
|
||||
class="footer__link hint--rounded hint--top-right"
|
||||
aria-label="Tweet about 'Web Maker'"
|
||||
@ -205,17 +203,15 @@ export default class Footer extends Component {
|
||||
<use xlinkHref="#twitter-icon" />
|
||||
</svg>
|
||||
</a>
|
||||
<A
|
||||
<Button
|
||||
onClick={this.props.supportDeveloperBtnClickHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="supportDeveloperFooterBtnClick"
|
||||
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile"
|
||||
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
|
||||
aria-label="Support the developer by pledging some amount"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Support the developer
|
||||
</A>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { h } from 'preact';
|
||||
import { A } from './common';
|
||||
import { Button } from './common';
|
||||
|
||||
const DEFAULT_PROFILE_IMG =
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
|
||||
@ -16,7 +16,7 @@ export function MainHeader(props) {
|
||||
onBlur={props.titleInputBlurHandler}
|
||||
/>
|
||||
<div class="main-header__btn-wrap flex flex-v-center">
|
||||
<a
|
||||
<button
|
||||
id="runBtn"
|
||||
class="hide flex flex-v-center hint--rounded hint--bottom-left"
|
||||
aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
|
||||
@ -25,9 +25,9 @@ export function MainHeader(props) {
|
||||
<svg style="width: 14px; height: 14px;">
|
||||
<use xlinkHref="#play-icon" />
|
||||
</svg>Run
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<A
|
||||
<Button
|
||||
onClick={props.addLibraryBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="addLibraryButtonClick"
|
||||
@ -42,9 +42,9 @@ export function MainHeader(props) {
|
||||
>
|
||||
{props.externalLibCount}
|
||||
</span>
|
||||
</A>
|
||||
</Button>
|
||||
|
||||
<a
|
||||
<button
|
||||
class="flex flex-v-center hint--rounded hint--bottom-left"
|
||||
aria-label="Start a new creation"
|
||||
onClick={props.newBtnHandler}
|
||||
@ -55,8 +55,8 @@ export function MainHeader(props) {
|
||||
>
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||||
</svg>New
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
id="saveBtn"
|
||||
class={`flex flex-v-center hint--rounded hint--bottom-left ${
|
||||
props.isSaving ? 'is-loading' : ''
|
||||
@ -74,8 +74,8 @@ export function MainHeader(props) {
|
||||
<use xlinkHref="#loader-icon" />
|
||||
</svg>
|
||||
Save
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
id="openItemsBtn"
|
||||
class={`flex flex-v-center hint--rounded hint--bottom-left ${
|
||||
props.isFetchingItems ? 'is-loading' : ''
|
||||
@ -93,8 +93,8 @@ export function MainHeader(props) {
|
||||
<use xlinkHref="#loader-icon" />
|
||||
</svg>
|
||||
Open
|
||||
</a>
|
||||
<A
|
||||
</button>
|
||||
<Button
|
||||
onClick={props.loginBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="loginButtonClick"
|
||||
@ -102,8 +102,8 @@ export function MainHeader(props) {
|
||||
aria-label="Login/Signup"
|
||||
>
|
||||
Login/Signup
|
||||
</A>
|
||||
<A
|
||||
</Button>
|
||||
<Button
|
||||
onClick={props.profileBtnHandler}
|
||||
data-event-category="ui"
|
||||
data-event-action="headerAvatarClick"
|
||||
@ -116,7 +116,7 @@ export function MainHeader(props) {
|
||||
src={props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''}
|
||||
class="main-header__avatar-img"
|
||||
/>
|
||||
</A>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -66,7 +66,7 @@ export default class Modal extends Component {
|
||||
onClick={this.props.closeHandler}
|
||||
aria-label="Close modal"
|
||||
title="Close"
|
||||
class="js-modal__close-btn modal__close-btn"
|
||||
class="js-modal__close-btn modal__close-btn"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { h } from 'preact';
|
||||
import { A } from './common';
|
||||
import { Button } from './common';
|
||||
|
||||
function NotificationItem({ type, children }) {
|
||||
var strongTag;
|
||||
@ -81,7 +81,7 @@ function Notification({ version, isLatest, ...props }) {
|
||||
>
|
||||
Share it
|
||||
</a>
|
||||
<A
|
||||
<Button
|
||||
aria-label="Support the developer"
|
||||
onClick={props.onSupportBtnClick}
|
||||
data-event-action="supportDeveloperChangelogBtnClick"
|
||||
@ -89,7 +89,7 @@ function Notification({ version, isLatest, ...props }) {
|
||||
class="btn btn-icon"
|
||||
>
|
||||
Support the developer
|
||||
</A>
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@ -33,6 +33,11 @@ p {
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
@ -125,6 +130,10 @@ p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.support-link {
|
||||
color: #d61237;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.block--mobile {
|
||||
display: block;
|
||||
@ -575,7 +584,7 @@ body > #demo-frame {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.main-header__btn-wrap > a {
|
||||
.main-header__btn-wrap > button {
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
@ -597,7 +606,7 @@ body > #demo-frame {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.main-header__btn-wrap > a > svg {
|
||||
.main-header__btn-wrap > button > svg {
|
||||
fill: #9297b3;
|
||||
margin-right: 4px;
|
||||
}
|
||||
@ -654,6 +663,9 @@ body > #demo-frame {
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -664,17 +676,20 @@ body > #demo-frame {
|
||||
|
||||
.footer__link {
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.footer a > svg {
|
||||
.footer button > svg {
|
||||
transition: 0.3s ease;
|
||||
fill: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.footer a:hover svg {
|
||||
.footer button:hover svg {
|
||||
fill: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
@ -745,12 +760,16 @@ body > #demo-frame {
|
||||
|
||||
.modal__close-btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
transition: 0.25s ease;
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.modal__close-btn > svg {
|
||||
|
||||
Reference in New Issue
Block a user