diff --git a/js/components/semi_collapsible_text.js b/js/components/semi_collapsible_text.js new file mode 100644 index 00000000..c9a54e09 --- /dev/null +++ b/js/components/semi_collapsible_text.js @@ -0,0 +1,15 @@ +export default { + name: 'semi-collapsible-text', + + data: function() { + return { + open: false, + } + }, + + methods: { + toggle: function() { + this.open = !this.open + }, + }, +} diff --git a/js/index.js b/js/index.js index 520dea03..98385810 100644 --- a/js/index.js +++ b/js/index.js @@ -40,6 +40,7 @@ import BaseForm from './components/forms/base_form' import DeleteConfirmation from './components/delete_confirmation' import NewEnvironment from './components/forms/new_environment' import EnvironmentRole from './components/environment_role' +import SemiCollapsibleText from './components/semi_collapsible_text' Vue.config.productionTip = false @@ -82,6 +83,7 @@ const app = new Vue({ nestedcheckboxinput, NewEnvironment, EnvironmentRole, + SemiCollapsibleText, }, mounted: function() { diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 1f3ea81c..8b096323 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -92,6 +92,11 @@ background-color: $color-gray-lightest; } + .semi-collapsed { + overflow: hidden; + height: $gap * 5.5; + } + .panel { @include shadow-panel; } diff --git a/templates/portfolios/task_orders/task_order_review.html b/templates/portfolios/task_orders/task_order_review.html index 83fcb9c6..26c95902 100644 --- a/templates/portfolios/task_orders/task_order_review.html +++ b/templates/portfolios/task_orders/task_order_review.html @@ -11,9 +11,15 @@