- Improved responsiveness and added s.b0n.pl as an hosted demo in the README.md

README.md

@@ -18,7 +18,7 @@
 - Easy [ShareX](https://github.com/ShareX/ShareX) integration
 - Dockerizable
 
-## Webinterface
+## [Webinterface](https://s.b0n.pl)
 
 ![Short URLs](https://user-images.githubusercontent.com/17984549/32700384-955d9336-c7c4-11e7-9fab-4141a86a375c.png)
 
@@ -26,7 +26,6 @@
 
 ![Generate ShareX Configuration](https://user-images.githubusercontent.com/17984549/32700395-cf9f057a-c7c4-11e7-9d2b-7523c8a95a20.png)
 
-
 ## Documenation
 
 - [Installation](https://github.com/maxibanki/golang-url-shortener/wiki/Installation)
@@ -34,24 +33,13 @@
 - [Setting up OAuth](https://github.com/maxibanki/golang-url-shortener/wiki/Setting-up-OAuth)
 - [ShareX Usage](https://github.com/maxibanki/golang-url-shortener/wiki/ShareX)
 
-## Clients
-
-### General
-
-In general the `POST` endpoints can be called, by using one of the following techniques:
-
-- application/json
-- application/x-www-form-urlencoded
-- multipart/form-data
-
-For all the endpoints which are on `/api/v1/protected` there is the `Authorization` header required.
-
 ## Why did you built this
 
-Just only because I want to extend my current self hosted URL shorter with some features and learn about new techniques like:
+Just only because I want to extend my current self hosted URL shorter (which was really messy code) with some more features and learn about new techniques like:
 
 - Golang unit testing
 - React
 - Makefiles
 - Travis CI
 - Key / Value databases
+- Dockerfile and Docker Image Creation

static/package.json

@@ -16,6 +16,7 @@
     "react-dom": "^16.1.1",
     "react-prism": "^4.3.1",
     "react-qr-svg": "^2.1.0",
+    "react-responsive": "^4.0.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",

static/src/Home/Home.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { Input, Segment, Form, Header, Card, Button, Select, Icon } from 'semantic-ui-react'
 import DatePicker from 'react-datepicker';
 import moment from 'moment';
+import MediaQuery from 'react-responsive';
 import 'react-datepicker/dist/react-datepicker.css';
 
 import CustomCard from '../Card/Card'
@@ -76,10 +77,17 @@ export default class HomeComponent extends Component {
             <Form.Field>
               <Input required size='large' type='url' ref={input => this.urlInput = input} onChange={this.handleURLChange} placeholder='Paste a link to shorten it' action>
                 <input />
+                <MediaQuery query="(min-width: 768px)">
                   <Select options={options} placeholder='Settings' onChange={this.onSettingsChange} multiple />
+                </MediaQuery>
                 <Button type='submit'>Shorten<Icon name="arrow right" /></Button>
               </Input>
             </Form.Field>
+            <MediaQuery query="(max-width: 767px)">
+              <Form.Field>
+                <Select options={options} placeholder='Settings' onChange={this.onSettingsChange} multiple fluid />
+              </Form.Field>
+            </MediaQuery>
             <Form.Group widths='equal'>
               {setOptions.indexOf("custom") > -1 && <Form.Field error={showCustomIDError}>
                 <Input label={window.location.origin + "/"} onChange={this.handleCustomIDChange} placeholder='my-shortened-url' />
@@ -93,7 +101,7 @@ export default class HomeComponent extends Component {
             </Form.Group>
           </Form>
         </Segment>
-        <Card.Group itemsPerRow="2">
+        <Card.Group itemsPerRow="2" stackable style={{ marginTop: "1rem" }}>
           {links.map((link, i) => <CustomCard key={i} header={new URL(link[1]).hostname} expireDate={link[2]} metaHeader={link[1]} description={link[0]} />)}
         </Card.Group>
       </div >