mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 06:52:05 +01:00
Code Issues Projects Releases Wiki Activity

Improve shrinked layout

Browse Source
This commit is contained in:
Borys_Levytskyi
2021-01-22 13:08:15 +02:00
parent 2b76ea9f7f
commit 2a9312af12
3 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/core/components/CommandLink.tsx
View File

@@ -6,17 +6,18 @@ import cmd from '../../shell/cmd';
type CommandLinkProps = {
command?:string;
text:string;
textClassName?: string
icon?: IconDefinition
}
function CommandLink({icon, command, text}: CommandLinkProps) {
function CommandLink({icon, command, text, textClassName}: CommandLinkProps) {
const onClick = () => cmd.execute(command || text);
if(icon != null)
return <a href="javascript:void(0)" onClick={onClick}><FontAwesomeIcon icon={icon} className="icon" />{text}</a>;
return <a href="javascript:void(0)" onClick={onClick}><FontAwesomeIcon icon={icon} className="icon" /><span className={textClassName}>{text}</span></a>;
return <a href="javascript:void(0)" onClick={onClick}>{text}</a>;
return <a href="javascript:void(0)" onClick={onClick}><span className={textClassName}>{text}</span></a>;
}
export default CommandLink;

13
src/index.css
View File

@@ -115,24 +115,25 @@ button:focus {outline:0;}
/* Top Links Shrink */
@media (max-width: 800px) {
.top-links .link-text { display: none }
.debug-indicators { display: none;}
.app-root {padding: 10px; }
}
.social-container{ position:fixed; bottom:20px; right:20px }
/* Remove margin space on body. Inline top links with header */
@media (max-width: 700px) {
body { padding: 10px; }
.expressionInput { width: 500px; }
/*.expressionInput { width: 450px; } */
}
/* Further shrink */
@media (max-width: 500px) {
.expressionInput { width: 350px; }
.expressionInput { width: 400px; }
.top-links a { display: inline-block; padding: 5px 10px}
}
@media (max-width: 350px) {
.expressionInput { width: 200px; }
@media (max-width: 450px) {
.expressionInput { width: 350px; }
}

4
src/shell/components/TopLinks.tsx
View File

@@ -8,10 +8,10 @@ import CommandLink from '../../core/components/CommandLink';
function TopLinks() {
return <ul className="top-links">
<li>
<CommandLink text="donate" icon={faDonate} />
<CommandLink text="donate" icon={faDonate} textClassName="link-text" />
</li>
<li>
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faGithub} size="lg" />github</a>
<a href="https://github.com/BorisLevitskiy/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faGithub} size="lg" /><span className="link-text">github</span></a>
</li>
<li>
<a href="https://twitter.com/BitwiseCmd"><FontAwesomeIcon className="icon" icon={faTwitter} size="lg" /><span className="link-text">twitter</span></a>