From 266cfdada83026ee7268a0e1bae3d11667acb882 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Mon, 22 Apr 2019 14:52:34 -0300 Subject: [PATCH] (add) api docs styles --- .../assets/css/components/_api.scss | 117 +++++ .../templates/api_docs/_action_tile.html.eex | 409 ++++++++++-------- 2 files changed, 334 insertions(+), 192 deletions(-) diff --git a/apps/block_scout_web/assets/css/components/_api.scss b/apps/block_scout_web/assets/css/components/_api.scss index ad56455253..c663993798 100644 --- a/apps/block_scout_web/assets/css/components/_api.scss +++ b/apps/block_scout_web/assets/css/components/_api.scss @@ -26,6 +26,17 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default; grid-template-rows: 1fr 1fr 1fr; padding: 30px; row-gap: 25px; + + @include media-breakpoint-down(md) { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + } + + @include media-breakpoint-down(sm) { + grid-auto-flow: row; + grid-template-columns: 1fr; + grid-template-rows: none; + } } .api-anchors-list-item { @@ -70,6 +81,10 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default; .api-doc-list-item-contents { display: flex; justify-content: space-between; + + @include media-breakpoint-down(sm) { + flex-direction: column; + } } .api-doc-list-item-title { @@ -85,6 +100,8 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default; font-size: 12px; line-height: 1.2; margin-bottom: 20px; + word-break: break-all; + word-wrap: break-word; > strong { font-weight: 700; @@ -104,6 +121,13 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default; flex-direction: column; flex-grow: 1; margin-left: 50px; + + @include media-breakpoint-down(sm) { + flex-direction: row; + justify-content: space-between; + margin-left: 0; + padding-top: 25px; + } } .api-doc-list-item-controls-badges { @@ -125,8 +149,101 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default; cursor: pointer; font-size: 14px; margin-top: auto; + white-space: nowrap; .fa { margin-left: 5px; } +} + +[aria-expanded="false"] { + .api-doc-list-item-controls-view-more-open { + display: block; + } + .api-doc-list-item-controls-view-more-close { + display: none; + } +} + +[aria-expanded="true"] { + .api-doc-list-item-controls-view-more-open { + display: none; + } + .api-doc-list-item-controls-view-more-close { + display: block; + } +} + +.api-doc-parameters-container { + border-top: 1px solid $base-border-color; + margin-top: 20px; + padding-top: $card-vertical-padding; +} + +.api-doc-parameters-list { + border-bottom: 1px solid $base-border-color; + margin-bottom: $card-vertical-padding; + padding-bottom: $card-vertical-padding / 2; + overflow-x: auto; +} + +.api-doc-parameters-list-title { + color: #333; + font-size: 16px; + font-weight: 500; + line-height: 1.2; + margin: 0 0 15px; + white-space: nowrap; +} + +.api-doc-parameters-list-item { + margin-bottom: 15px; + + &:last-child { + margin-bottom: 0; + } + + @include media-breakpoint-down(sm) { + margin-bottom: 30px; + + [class*="col-"] { + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } + } +} + +.api-doc-parameters-list-item-title { + color: #333; + font-size: 14px; + font-weight: 500; + line-height: 1.2; + margin: 0 0 8px; +} + +.api-doc-parameters-list-item-subtitle { + color: #aaa; + font-size: 13px; + font-weight: 400; + line-height: 1.2; + margin: 0; +} + +.api-doc-parameters-list-item-description { + color: #333; + font-size: 14px; + font-weight: 400; + line-height: 1.2; + margin: 0 0 8px; + + &:last-child { + margin-bottom: 0; + } + + strong { + font-weight: 700; + } } \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex index 5174adde28..f7611e9f54 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/api_docs/_action_tile.html.eex @@ -18,217 +18,242 @@ <%= gettext "GET" %> <%= gettext "POST" %> - More Details + + More Details + Hide Details + +
-
-

<%= gettext "Parameters" %> - -

-
-
-
<%= gettext "Name" %>
-
<%= gettext "Description" %>
-
-
-
-
<%= gettext "Module" %> * - <%= gettext "required" %> - -
- <%= gettext "string" %> <%= gettext "(query)" %> -
-
<%= gettext "A string with the name of the module to be invoked." %> - <%= gettext "Must be set to:" %> <%= @module_name %>
-
-
-
-
<%= gettext "Action" %> * - <%= gettext "required" %> - -
- <%= gettext "string" %><%= gettext "(query)" %> -
-
<%= gettext "A string with the name of the action to be invoked." %> - <%= gettext "Must be set to:" %> <%= @action.name %>
-
<%= for required_param <- @action.required_params do %>
-
<%= required_param.key %> * - <%= gettext "required" %> - -
<%= required_param.type %> <%= gettext "(query)" %>
-
-
<%= required_param.description %>
- " - data-required="true" - type="text" - class="collapse form-control form-control-danger is-invalid" - placeholder="<%= input_placeholder(required_param) %>" - data-parameter-key="<%= required_param.key %>" - > -
-
-
<% end %> <%= for optional_param <- @action.optional_params do %>
-
-
<%= optional_param.key %>
- <%= optional_param.type %> <%= gettext "(query)" %> -
-
<%= optional_param.description %> " +

+ <%= gettext "Parameters" %> + + +

+ +
+
+

<%= gettext "Name" %>

+

<%= gettext "Description" %>

+
+ +
+
+
<%= gettext "Module" %> *<%= gettext "required" %>
+

<%= gettext "string" %> <%= gettext "(query)" %>

+
+
+

<%= gettext "A string with the name of the module to be invoked." %>

+

<%= gettext "Must be set to:" %> <%= @module_name %> +

+
+ +
+
+
<%= gettext "Action" %> *<%= gettext "required" %>
+

<%= gettext "string" %> <%= gettext "(query)" %>

+
+
+

<%= gettext "A string with the name of the action to be invoked." %>

+

<%= gettext "Must be set to:" %> <%= @action.name %>

+
+
+ + <%= for required_param <- @action.required_params do %> +
+
+
<%= required_param.key %> *<%= gettext "required" %>
+

<%= required_param.type %> <%= gettext "(query)" %>

+
+
+

<%= required_param.description %>

+
+ -
-
<% end %>
-
- + class="collapse form-control form-control-danger is-invalid" + placeholder="<%= input_placeholder(required_param) %>" + data-parameter-key="<%= required_param.key %>" + />
-
- +
+
+ <% end %> + + <%= for optional_param <- @action.optional_params do %> +
+
+
<%= optional_param.key %>
+

<%= optional_param.type %> <%= gettext "(query)" %>

+
+
+

<%= optional_param.description %>

+ +
+
+ <% end %> + +
+
+ +
+
+ +
+
+ +
+
+
<%= gettext "Curl" %>
+
+ 

           

         

-        
-        
"
-        >
-          

-            
<%= gettext "Curl" %>

-            

-              
"
-                class="m-2"
-              >

+        

+          
<%= gettext "Request URL" %>

+          

+            

+          

+        

+        
<%= gettext "Server Response" %>

+        

+          
<%= gettext "Code" %>

+          
<%= gettext "Details" %>

+        

+        

+          

+          

+            
<%= gettext "Response Body" %>

+              

+                

             

           

-          

-            
<%= gettext "Request URL" %>

+        

+      

+    

+    
+    
<%= gettext "Responses" %>

+    

+      
<%= gettext "Code" %>

+      
<%= gettext "Description" %>

+    

+    <%= for {response, index} <- Enum.with_index(@action.responses) do %>
+    

+      
<%= response.code %>

+      

+        

+          
<%= response.description %>

+        

+        
+        
+        
+        

+          
+          

             

               
"
                 class="m-2"
+                data-json='<%= response.example_value %>'
               >

             

           

-          

-            
<%= gettext "Server Response" %>

-            

-              
<%= gettext "Code" %>

-              
<%= gettext "Details" %>

-            

-            

-              
"
-              >
-              

-              
 <%= gettext "Response Body" %> 

-                  
"
-                    class="m-2"
-                  >

-                

-              

-            

+          <%= if index == 0 do %>
+          
+          

+            <%= render "_model_table.html", model: response.model %>
           

-        
 
-        

-      
 
-      
<%= gettext "Responses" %>

-      

-        

-          
<%= gettext "Code" %>

-          
<%= gettext "Description" %>

-        
 <%= for {response, index} <- Enum.with_index(@action.responses) do %> 

-          
 <%= response.code %> 

-          

-            

-              
<%= response.description %>

-            

-            
-            

-              
"
-                role="tabpanel"
-                aria-labelledby="<%= "#{@module_name}-#{@action.name}-example-value-tab" %>"
-              >
-                

-                  

-                

-              
  <%= if index == 0 do %> 
"
-                role="tabpanel"
-                aria-labelledby="<%= "#{@module_name}-#{@action.name}-model-tab" %>"
-              > <%= render "_model_table.html", model: response.model %> 
  <% end %>
-            
 
-          

-        
 <% end %>
+          <% end %>
+        

       

     

+    <% end %>
   

 

\ No newline at end of file