mirrors/BitwiseCmd
1
0
Fork 0
mirror of https://github.com/BorysLevytskyi/BitwiseCmd.git synced 2025-12-10 15:02:07 +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 = { type CommandLinkProps = {
command?:string; command?:string;
text:string; text:string;
textClassName?: string
icon?: IconDefinition icon?: IconDefinition
} }
function CommandLink({icon, command, text}: CommandLinkProps) { function CommandLink({icon, command, text, textClassName}: CommandLinkProps) {
const onClick = () => cmd.execute(command || text); const onClick = () => cmd.execute(command || text);
if(icon != null) 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; export default CommandLink;

13
src/index.css
View File

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

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

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