diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-06 15:49:51 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-06 15:49:51 -0700 |
commit | b8c259f9e791b295aa7c3c83033bd1d8377f3407 (patch) | |
tree | 03b3b89b2945bc84fafde91b4b8c155c3493d3f6 | |
parent | b6190d08d9c7487a428eb9502dc745e7bbb222ea (diff) |
Adding expanding navbar, some docs
-rw-r--r-- | README.md | 9 | ||||
-rw-r--r-- | docs/API.md (renamed from API.md) | 0 | ||||
-rw-r--r-- | docs/goals.md (renamed from goals.md) | 1 | ||||
-rw-r--r-- | docs/ranking.md (renamed from ranking.md) | 0 | ||||
-rwxr-xr-x | install.sh | 5 | ||||
-rw-r--r-- | ui/src/components/navbar.tsx | 16 | ||||
-rw-r--r-- | ui/src/index.tsx | 58 | ||||
-rw-r--r-- | ui/src/main.css | 11 |
8 files changed, 93 insertions, 7 deletions
@@ -46,7 +46,10 @@ cd lemmy and goto http://localhost:8080 ## Documentation -- [ActivityPub API.md](API.md) -- [Goals](goals.md) -- [Ranking Algorithm](ranking.md) +- [ActivityPub API.md](docs/API.md) +- [Goals](docs/goals.md) +- [Ranking Algorithm](docs/ranking.md) +## Credits + +Icons made by [Freepik](https://www.freepik.com/) licensed by [CC 3.0](http://creativecommons.org/licenses/by/3.0/) diff --git a/goals.md b/docs/goals.md index 37c4e5df..e569b1f7 100644 --- a/goals.md +++ b/docs/goals.md @@ -33,4 +33,5 @@ - [Hierarchical tree building javascript](https://stackoverflow.com/a/40732240/1655478) - [Hot sorting discussion](https://meta.stackexchange.com/questions/11602/what-formula-should-be-used-to-determine-hot-questions) [2](https://medium.com/hacking-and-gonzo/how-reddit-ranking-algorithms-work-ef111e33d0d9) - [Classification types.](https://www.reddit.com/r/ModeratorDuck/wiki/subreddit_classification) +- [Temp Icon](https://www.flaticon.com/free-icon/mouse_194242) diff --git a/ranking.md b/docs/ranking.md index f55a1284..f55a1284 100644 --- a/ranking.md +++ b/docs/ranking.md diff --git a/install.sh b/install.sh new file mode 100755 index 00000000..ac5f5103 --- /dev/null +++ b/install.sh @@ -0,0 +1,5 @@ +cd ui +yarn +yarn build +cd ../server +cargo run diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index d766bf07..2032d49b 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -7,7 +7,7 @@ export class Navbar extends Component<any, any> { constructor(props, context) { super(props, context); - this.state = {isLoggedIn: UserService.Instance.loggedIn}; + this.state = {isLoggedIn: UserService.Instance.loggedIn, expanded: false}; // Subscribe to user changes UserService.Instance.sub.subscribe(user => { @@ -27,11 +27,14 @@ export class Navbar extends Component<any, any> { navbar() { return ( <nav class="navbar navbar-expand-sm navbar-light bg-light p-0 px-3 shadow"> - <a class="navbar-brand" href="#">Lemmy</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> + <a class="navbar-brand" href="#"> + <svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg> + Lemmy + </a> + <button class="navbar-toggler" type="button" onClick={linkEvent(this, this.expandNavbar)}> <span class="navbar-toggler-icon"></span> </button> - <div class="collapse navbar-collapse"> + <div className={`${!this.state.expanded && 'collapse'} navbar-collapse`}> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href={repoUrl}>About</a> @@ -63,4 +66,9 @@ export class Navbar extends Component<any, any> { UserService.Instance.logout(); // i.props.history.push('/'); } + + expandNavbar(i: Navbar, event) { + i.state.expanded = !i.state.expanded; + i.setState(i.state); + } } diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 5e454c4d..d374ec1e 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -38,10 +38,68 @@ class Index extends Component<any, any> { <Route path={`/post/:id`} component={Post} /> <Route path={`/community/:id`} component={Community} /> </Switch> + {this.symbols()} </div> </HashRouter> ); } + + symbols() { + return( + <symbol id="icon-mouse" version="1.1" x="0px" y="0px" + viewBox="0 0 512 512"> + <g> + <g> + <path d="M499.059,323.505l-7.52-32.532l-70.047,16.19c1.513-11.983,2.297-24.042,2.297-36.037c0-18.334-1.801-35.785-5.316-52.19 + c29.365-12.101,55.143-28.885,69.372-45.529c17.524-20.498,25.985-46.568,23.822-73.406 + c-2.163-26.862-14.706-51.268-35.316-68.724C433.879-4.694,369.917,0.439,333.774,42.718 + c-9.546,11.168-18.318,27.381-25.379,46.649c-16.512-5.419-34.132-8.243-52.395-8.243s-35.885,2.824-52.395,8.243 + c-7.06-19.267-15.832-35.481-25.379-46.649C142.082,0.44,78.123-4.695,35.648,31.277C15.038,48.733,2.494,73.141,0.332,100.001 + c-2.161,26.838,6.297,52.907,23.822,73.406c14.229,16.644,40.006,33.427,69.372,45.529c-3.515,16.405-5.316,33.856-5.316,52.189 + c0,11.995,0.785,24.053,2.297,36.037l-70.047-16.19l-7.52,32.532l84.337,19.492c4.349,17.217,10.201,33.953,17.421,49.752 + L12.941,416.27l7.52,32.532l110.634-25.57c1.38,2.197,2.779,4.373,4.218,6.509c32.548,48.323,75.409,74.934,120.687,74.934 + c45.278,0,88.138-26.612,120.687-74.934c1.439-2.136,2.839-4.313,4.218-6.509l110.634,25.57l7.52-32.532l-101.758-23.519 + c7.221-15.799,13.072-32.535,17.421-49.752L499.059,323.505z M183.578,220.372c0-11.41,9.189-20.65,20.482-20.65 + c11.306,0,20.494,9.24,20.494,20.65c0,11.408-9.188,20.656-20.494,20.656C192.768,241.028,183.578,231.78,183.578,220.372z + M256,413.29c-29.895,0-54.216-19.471-54.216-43.403c0-23.932,24.322-43.403,54.216-43.403s54.216,19.471,54.216,43.403 + C310.216,393.819,285.895,413.29,256,413.29z M307.785,241.183c-11.402,0-20.65-9.317-20.65-20.81 + c0-11.494,9.248-20.81,20.65-20.81c11.387,0,20.635,9.317,20.635,20.81C328.422,231.866,319.173,241.183,307.785,241.183z"/> + </g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + <g> + </g> + </symbol> + ); + } + } render(<Index />, container); diff --git a/ui/src/main.css b/ui/src/main.css index 9c13bb9d..12eb17a4 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -36,3 +36,14 @@ body { .listing { min-height: 61px; } + +.icon { + display: inline-flex; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; + vertical-align: middle; + margin-bottom: 4px; +} |