Skip to content

Commit

Permalink
Dynamic panel expansion / resizing of form elements
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrew Brown committed May 24, 2016
1 parent 519f412 commit c3cec18
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 7 deletions.
19 changes: 19 additions & 0 deletions app/assets/stylesheets/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,25 @@ pre {
}
}


.form-container {
height: 95%;
display: flex;
flex-direction: column;

.mui-form-group {
height: 95%;

.mui-textfield {
height: 100%;
}
}
}

.buttons {
width: 100%;
margin-top: auto;

button {
margin-right: 7px;
}
Expand Down Expand Up @@ -102,6 +120,7 @@ pre {
#input_text_area {
min-height: 250px;
height: 100%;
resize: vertical;
}

.mui-appbar {
Expand Down
16 changes: 9 additions & 7 deletions app/views/dactylogram/new.erb
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,24 @@
</div>

<%= form_tag({action: :create}, method: :post, class: 'mui-panel', id: 'this-form') do %>
<i class="material-icons md-36 toggle-expansion-button">aspect_ratio</i>
<legend style="width: 80%;">Generate a linguistic dactylogram below:</legend>
<i class="material-icons md-36 toggle-expansion-button">aspect_ratio</i>
<legend style="width: 80%;">Generate a linguistic dactylogram below:</legend>

<div class="mui-form-group" style="height:80%;">
<div class="form-container">
<div class="mui-form-group">
<div class="mui-textfield mui-textfield--float-label">
<textarea name="text" id="input_text_area"><%= @file_text || 'It was a dark and stormy night...' %></textarea>
<label>Write or paste any text here</label>
</div>
</div>
<div class="buttons">
<button type="submit" class="mui-btn mui-btn--default mui-btn--primary mui-btn--raised" id="analyze-text-button">Analyze this text</button>
or
<button id="document-upload-button" class="mui-btn mui-btn--default mui-btn--raised" onclick="#">Analyze a file</button>
<span class="loading-icon" id="submit-loading-icon"><%= image_tag 'loading.gif' %></span>
<button type="submit" class="mui-btn mui-btn--default mui-btn--primary mui-btn--raised" id="analyze-text-button">Analyze this text</button>
or
<button id="document-upload-button" class="mui-btn mui-btn--default mui-btn--raised" onclick="#">Analyze a file</button>
<span class="loading-icon" id="submit-loading-icon"><%= image_tag 'loading.gif' %></span>
</div>
<div style="clear: both;"></div>
</div>
<% end %>
<%= form_tag({ action: :create }, multipart: true, id: 'file-upload-form') do %>
Expand Down

0 comments on commit c3cec18

Please sign in to comment.