Explorar o código

show .revision-head link buttons on mobile

Yuki Takei %!s(int64=7) %!d(string=hai) anos
pai
achega
d810c8a8b5
Modificáronse 2 ficheiros con 16 adicións e 6 borrados
  1. 5 3
      resource/js/components/Page.js
  2. 11 3
      resource/styles/scss/_wiki.scss

+ 5 - 3
resource/js/components/Page.js

@@ -109,15 +109,17 @@ export default class Page extends React.Component {
 
   render() {
     const config = this.props.crowi.getConfig();
+    const isMobile = this.props.crowi.isMobile;
     const isMathJaxEnabled = !!config.env.MATHJAX;
 
-    return (
-      <RevisionBody html={this.state.html}
+    return <div className={isMobile ? 'page-mobile' : ''}>
+      <RevisionBody
+          html={this.state.html}
           inputRef={el => this.revisionBodyElement = el}
           isMathJaxEnabled={isMathJaxEnabled}
           renderMathJaxOnInit={true}
       />
-    );
+    </div>;
   }
 }
 

+ 11 - 3
resource/styles/scss/_wiki.scss

@@ -134,17 +134,25 @@ div.body {
 
     .revision-head-link,
     .revision-head-edit-button {
-      visibility: hidden;
+      margin-left: 0.5em;
       font-size: 0.6em;
+      opacity: 0;
     }
     &:hover .revision-head-link,
     &:hover .revision-head-edit-button {
-      visibility: unset;
-      margin-left: 0.5em;
+      opacity: 1 !important;
     }
   }
 }
 
+// mobile
+.page-mobile .wiki .revision-head {
+  .revision-head-link,
+  .revision-head-edit-button {
+    opacity: 0.3;
+  }
+}
+
 @media (max-width: $screen-sm-max) { // {{{ tablet and iphone size
   .main-container .main .wiki {
     img {